Изменить размер изображения CSS

Изменить размер изображения CSS

Значения

Значение Описание
CSS единицы Задает размер фона в заданных CSS единицах.
Проценты Задает размер фона в процентах от размера элемента.
auto Фон будет иметь натуральный размер, такой, как реальный размер картинки фона. Если же auto задано только для одной стороны, то по этой стороне фон будет масштабироваться так, чтобы иметь неискаженные пропорции. См. примеры ниже и видео.
cover Масштабирует картинку так, чтобы она накрыла собой весь блок с сохранением пропорций. Картинка будет стараться поместиться целиком, но это не всегда будет получаться, поэтому какая-то ее часть будет обрезаться. Блок всегда будет покрыт картинкой целиком. См. видео ниже.
contain Масштабирует картинку так, чтобы она целиком влезла в блок с сохранением пропорций. При этом она может занять или всю ширину, или всю высоту (зависит от пропорций картинки и от размеров элемента). Блок в общем случае будет покрыт картинкой не целиком (зато картинка всегда будет видна вся, хоть и в уменьшенном варианте). См. видео ниже.

Значение по умолчанию: auto.

Примеры

Пример . Значение auto для обоих сторон

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

body { background: url(«bg.jpg») no-repeat; background-size: auto; }

Посмотреть пример.

Пример . Значения в процентах

В данном примере фоновая картинка занимает 50% ширины и 30% высоты окна браузера (при этом картинка будет иметь искаженные пропорции):

body { background: url(«bg.jpg») no-repeat; background-size: 50% 30%; }

Посмотреть пример.

Пример . Значения в пикселях и процентах

В данном примере фоновая картинка занимает 50% ширины окна браузера и 400px по высоте (при этом картинка будет иметь искаженные пропорции):

body { background: url(«bg.jpg») no-repeat; background-size: 50% 400px; }

Посмотреть пример.

Пример . Значение auto для одной из сторон + проценты

В данном примере фоновая картинка занимает 50% ширины окна браузера, а по высоте подстроится так, чтобы сохранить пропорции (поуменьшайте окно браузера, чтобы убедиться, что этой действительно так — картинка будут оставаться неискаженной):

body { background: url(«bg.jpg») no-repeat; background-size: 50% auto; }

Посмотреть пример.

Пример . Значение auto для одной из сторон + пиксели

В данном примере фоновая картинка занимает 300px по высоте, а по ширине подстроится так, чтобы сохранить пропорции:

body { background: url(«bg.jpg») no-repeat; background-size: auto 300px; }

Посмотреть пример.

Пример . Значение 100% для обеих сторон

Сейчас картинка будет всегда на весь экран с искаженными пропорциями (так как и по ширине и по высоте мы берем 100%, можно было просто написать background-size: 100% — одно значение):

body { background: url(«bg.jpg») no-repeat; background-size: 100% 100%; }

Посмотреть пример.

Пример . Значение contain

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

body { background: url(«bg.jpg») no-repeat; background-size: contain; }

Посмотреть пример.

Пример . Значение cover

Сейчас картинка будет целиком накрывать собой в блок с сохранением пропорций: Картинка будет стараться поместиться целиком, но это не всегда будет получаться, поэтому какая-то ее часть будет обрезаться:

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

Плюсы:

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

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

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

Минусы:

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

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

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

Пример кода без указания размеров изображения

Результат в браузере
Код страницы
<!DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»utf-8″ />
<title>Тестовая страница</title>
</head>
<body>
<img src=»my_img/1.jpg» >
</body>
</html>

Пример кода с изменением размеров изображения в .css

Результат в браузере
Код страницы
<!DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»utf-8″ />
<title>Тестовая страница</title>
</head>
<body>
<img src=»my_img/1.jpg»
style=»width:150px; » >
</body>
</html>

В обоих примерах, показанных выше использована одна и та же картинка с размером 300x184px(ширина и высота). В 1 примере картинка отобразилась в браузере без изменений с оригинальным размером 300x184px т. к. в css не указывались ширина и высота. А во 2 примере картинка отобразилась в браузере уменьшенная в 2 раза т. к. была указана ширина 150px, высота соответственно автоматически изменилась до 92 px. Как вы видите, свойство height, можно не указывать вообще т. к. оно автоматически изменяется пропорционально width.

Если вы укажете оба параметра: width(ширина), height(высота) и они не будут соответствовать пропорциям, то картинка будет иметь именно такой размер, но в сжатом или растянутом виде, в зависимости от значений.


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

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