Как уменьшить картинку css

Как уменьшить картинку в html

Для изменения размеров рисунка средствами HTML у тега <img> предусмотрены атрибуты width (ширина) и height (высота). В качестве значения используются пикселы, при этом аргументы должны совпадать с физическими размерами картинки. Например, на рис. 10.6 показано изображение, которое имеет размеры 100х111 пикселов.

Рис. 10.5

Рис. 10.6. Картинка исходного размера

Соответственно, HTML-код для размещения данного рисунка, приведен в примере 10.4.

Пример 10.4. Размеры рисунка

Если размеры изображения указаны явно, то браузер использует их для того, чтобы отображать соответствующую картинке пустую область в процессе загрузки документа (рис. 10.7). В противном случае браузер ждет, когда рисунок загрузится полностью, после чего меняет ширину и высоту картинки (рис. 10.8). При этом может произойти переформатирование текста, поскольку первоначально размер картинки не известен и автоматически он устанавливается небольшим.

Рис. 10.7

Рис. 10.7. Размеры картинки не указаны и она еще не загрузилась

Рис. 10.8

Рис. 10.8. Картинка загружена, текст переформатирован

Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается неизменным. Поэтому с осторожностью уменьшайте изображение, т.к. это может вызвать недоумение у читателей, отчего такой маленький рисунок так долго грузится. А вот увеличение размеров приводит к обратному эффекту &#8212; размер изображения велик, но файл относительно изображения аналогичного размера загружается быстрее.

На рис. 10.9 приведено то же изображение, что показано на рис. 10.6, но с увеличенной в два раза шириной и высотой.

Рис. 10.9

Рис. 10.9. Вид картинки, увеличенной в браузере

Код для такого рисунка останется практически неизменным и показан в примере 10.5.

Пример 10.5. Изменение размера рисунка

Такое изменение размеров называется ресемплированием, при этом алгоритм браузера по своим возможностям уступает графическим редакторам. Поэтому увеличивать таким способом изображения нужно только в особых случаях, а то слишком ухудшается качество картинки. Лучше воспользоваться какой-нибудь графической программой. Исключением являются рисунки, содержащие прямоугольные области. На рис. 10.10 приведен файл узора, который занимает 54 байта и имеет исходный размер 8 на 8 пикселов, увеличенных до 150 пикселов.

Рис. 10.10. Увеличенное изображение

Браузеры используют два алгоритма для ресемплирования — бикубический (дает сглаженные границы и плавный тоновый диапазон цветов) и по ближайшим точкам (сохраняет первоначальный набор цветов и резкость краев). Последние версии браузеров применяют бикубический алгоритм, а старые браузеры, наоборот, алгоритм по ближайшим точкам.

Как изменить размер картинки в HTML

В этой статье мы поговорим о нескольких вариантах изменения размеров картинки в HTML. Для тех, кто только начинает изучать html будет полезно прочитать статью про вывод картинок на странице: HTML тег <img>.

Изменять размер изображения полезно в нескольких случаях:

  • Браузер сможет сразу при загрузке страницы сделать правильный масштаб страницы и контент не будет прыгать. Например, все содержимое html-страницы уже загрузилось, а картинка пока еще нет. В этом случае после загрузки картинки она сместит весь контент ниже. Такое может происходить чаще всего с мобильных устройств, но в любом случае это будет выглядеть некрасиво.
  • Просто уменьшить размер картинки, поскольку ширина области не позволяет вывести такое большое изображение.

Для изменения размеров картинки html существует два способа:

  • Через атрибуты width и height в теге <img>
  • Через свойства CSS width:N px и height:N px

В обоих случаях результат примера будет одинаковый: картинка будет 100 пикселей на 100 пикселей.

Если не задавать размеры изображения, то она будет выведена в тех размерах, какие есть. Также можно сказать, что если указаны размеры (или только один размер), то картинка будет в пропорции изменена до того размера, который указан. Например, изображение 500х300 пикселей. Если мы укажем ширину в 100 пикселей, то высота картинки изменится пропорционально и составит 60 пикселей (в 5 раз меньше).

Как изменить размер изображения средствами HTML.

Исходное изображение, которое вы вставляете на страницу, не всегда может быть нужных размеров.

Конечно, вы можете открыть его в графическом редакторе и изменить размеры нужным образом. Этот способ является более предпочтительным, т.к. вы меняете исходное изображение и при этом соответствующим образом изменяется его размер.

Но, такой способ не всегда подходит, т.к. иногда файл может находится на сервере, к которому у вас нет доступа. К тому же на такой способ изменения размера уходит очень много времени.

В HTML есть возможность менять размер изображения программно. Это делается с помощью атрибутов width и height.

Отвечает за задание ширины изображения

задает высоту изображения

Вернемся к примеру из предыдущего урока и изменим размеры изображения, которое было там вставлено:

Первому изображению заданы атрибуты width и height, а второму нет. Посмотрите, как это будет в итоге выглядеть:

Числовое значение, которое задается в качестве параметра атрибутов width и height &#8212; это количество пикселей. Средсвами HTML можно задавать размер изображений только в пикселях.

Обратите внимание, что эти атрибуты меняют размер изображения именно при отображении его на веб-странице. Исходный размер при этом не меняется. Браузер программно, искусственно изменяет размер изображения. Объем данных загружаемых при этом никак не изменяется, как если бы вы меняли размер в графическом редакторе.

Еще стоит обратить внимание, что уменьшение изображения с помощью атрибутов width и height может произойти без изменения исходного качества изображения. Чего не скажешь по поводу увеличения исходного изображения, такую операцию производить не рекомендуется, т.к. в таком случае изображение теряет свой первоначальный вид и становится слишком расплывчатым.

Посмотрите, как это может выглядеть на следующем примере:

Подводя итог, если вы хотите изменить размеры изображения, используйте атрибуты width и height для элемента img и в качестве их значений и указывайте необходимое количество пикселей по ширине и высоте.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *