Размеры изображения
Для изменения размеров изображения средствами HTML предусмотрены
параметры width и height
тега <IMG>.
Исходное изображение sample.gif имеет размеры 100 на 111 пикселов.
 |
HTML код для размещения данного рисунка:
Обязательно задавайте размеры всех изображений на веб-странице. Это несколько ускоряет загрузку страницы, поскольку браузеру нет нужды вычислять размер каждого рисунка после его получения. Это утверждение особенно важно для изображений, размещенных внутри таблицы. Такая таблица не будет показана до тех пор, пока все рисунки в ней не будут загружены полностью.
Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается неизменным. Поэтому с осторожностью уменьшайте изображение, т.к. это может вызвать недоумение у читателей, отчего такой маленький рисунок так долго грузится. А вот увеличение размеров приводит к обратному эффекту — размер изображения велик, но файл относительно изображения аналогичного размера загружается быстрее.
Ниже приведен рисунок sample.gif с увеличенной в два раза шириной и высотой (200 х 222).
|
И соответственно код HTML к нему:
Алгоритм, использующийся браузерами для ресемплирования (изменения размера) изображения, уступает по своим возможностям графическим редакторам. Поэтому увеличивать изображения путем изменения их размеров нужно в особых случаях, уж слишком ухудшается качество картинки. Лучше воспользоваться какой-нибудь графической программой. Исключением являются рисунки содержащие прямоугольные области. Приведенный ниже файл узора занимает 54 байта и имеет исходный размер 8 на 8 пикселов, увеличенных до 150.
 |
В рисунке не возникает никаких искажений, что не удивительно, откуда им вообще взяться, если все линии только вертикальные и горизонтальные.
| Статья опубликована: 06.09.2005 | Последнее обновление: 07.02.2008 |
Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.
- Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
- Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
- Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
- Потренироваться в написании комментариев вы можете в песочнице.
Комментарии к статье
Александр
14.12.2006
Влад Мержевич
15.12.2006
IMG {
width: 150px;
height: 150px;
}
</style>
Александр
16.12.2006
Влад Мержевич
18.12.2006
Александр
22.12.2006
gudoshi
05.05.2007
Андрей
24.08.2007
<img src="taurus.jpg" style="width: 118px; height: 117px" height="117" width="118"
Вопрос: почему длина и ширина прописываются дважды? Может для совместимости с разными браузерами? Или тонкость какая-то есть, или ошибки в браузерах?
Влад Мержевич
27.08.2007
Дмитрий
27.09.2007
Влад Мержевич
15.10.2007
Марина
11.02.2008
<table>
<tr>
<td><img src="files/head.jpg" width="100%"></img></td>
</tr>
</table>
mig
25.05.2008
width то указывается тегу IMG, т.е. картинке, а 100% ширина картинки это и есть его исходная ширина. Можно ведь и больше и меньше % указать при необходимости...
ЛюбопытнаяЯ
29.05.2008
SLK
30.07.2008