css изменение размера изображения

Изображения — составляющие практически любого сайта, поэтому без изменения размера не обойтись. Изменять размер картинки можно 2 способами: в графическом редакторе или программно в коде html на css .

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

1. Изменение картинки в графическом редакторе

Изменять размер изображения вы можете в любом графическом редакторе(photoshop, gimp, xnview) и оно автоматически будет меняться на сайте в соответствии с оригинальными размерами.

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

— графические редакторы некачественно сжимают картинки менее 200 пикселей по ширине и высоте.

Всегда, когда это возможно и целесообразно старайтесь изменять размер именно в графическом редакторе, чтобы картинки быстрее загружались, чем при программном изменении. Разница в скорости может составлять десятки раз.

2. Изменение картинки в коде css на сайте

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

— Качественно сжимаются небольшие картинки, менее 200 пикселей по высоте или ширине в отличие от графических редакторов. Если вы хотите, чтобы на сайте размер изображения был меньше 200 пикселей, то лучше, чтобы исходный размер был больше на 30-50%(260-300 пикселей), чтобы сохранить хорошее качество при уменьшении.

При этом разница в скорости загрузки сайта чувствоваться не будет т. к. небольшие изображения занимают очень мало места и при увеличении их размера на 30% вы не заметите изменений. Но разницу в качестве заметите.

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

Как изменить размер картинки в html с помощью css

Чтобы изменить размера изображения в html средствами css используются свойства width(ширина) и height(высота) внутри атрибута style. Вы можете написать только width или height , и оставшееся неуказанное значение автоматически изменится с сохранением пропорций картинки. Например, указав только ширину изображения с помощью width, его высота(height) изменится автоматически, сохранив пропорции. И наоборот, при указании только высоты(height), его ширина также автоматически поменяется, сохранив пропорции картинки.

В прошлый раз мы рассмотрели вариант вывода изображений из папки на PHP.

Из рассмотренного примера мы поняли что изображение выводится на страницу при помощи HTML тегов .
А размеры картинки мы прописали прямо в HTML коде.

Сейчас покажу как задать размеры изображения при помощи таблицы стилей. Все эти данные поместим в отдельный файл с расширением css и назовем его для примера style.css.

Размеры изображения задаются параметрами width и height.
Для того, чтобы задать размеры для изображения и прописать его через файл CSS нужно создать класс для тега src. Для примера пропишем >

Тогда в файле css размеры будут записаны таким образом

При таком варианте записи, если реальная высота изображения будет больше 170 пикселей, например, 400 пикселей то на странице будет показано искаженное изображение. Оно будет сплющено.

Для того, чтобы избежать этого можно задать только один параметр, ширину изображения, высота по умолчанию будет выставлено, автоматически не нарушая пропорции изображения:

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

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

Например, таблица

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

Вот таким образом:

В этом примере мы рассмотрели вариант, как задаются размеры изображения при помощи css. Но на самом деле, при помощи файла css задаются все параметры для дизайна всего сайта. Здесь содержатся все параметры для размеров, внешнего вида, для всех пунктов меню и так далее.

Для веб-дизайнеров является плохим тоном если стили приписываются в формате HTML. В шаблоне прописываются только классы и id для каждого элемента. А все стили выносятся в отдельный файл css.

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

А если есть какие мнения по поводу прочитанного форма для комментария внизу.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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