Как ограничить ширину картинки?

К селектору img можно добавить свойство width со значением 100% и картинки будут занимать всю доступную им ширину.

img {
  width: 100%; /* Ширина */
}

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

Ограничение сверху означает, что как только картинка достигнет указанной ширины, больше она увеличиваться не будет (рис. 1).

Рис. 1. Ограничение ширины изображения сверху

Ограничение снизу означает, что как только картинка достигнет указанной ширины, больше она уменьшаться не будет (рис. 2).

Рис. 2. Ограничение ширины изображения снизу

Эти два поведения допустимо комбинировать, устанавливая диапазон ширины изображений, в пределах которых картинка может менять свои размеры (рис. 3).

Рис. 3. Ограничение ширины изображения снизу и сверху

Чтобы установить для изображений такие ограничения имеется два метода:

  • использование свойств min-width и max-width;
  • использование стилевых функций min() и max().

Использование min-width и max-width

Свойства min-width и max-width устанавливают, соответственно, минимальную и максимальную ширину элемента. Добавляя их к селектору img вместе со свойством width, получим гибкое изображение, которое будет менять свою ширину в указанном нами диапазоне (пример 1).

Пример 1. Свойства min-width и max-width

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Ширина</title> <style> img { width: 100%; /* Гибкая ширина */ min-width: 400px; /* Минимальная ширина */ max-width: 600px; /* Максимальная ширина */ margin: auto; display: block; /* Выравнивание по центру */ } </style> </head> <body> <img src="image/playfulcat.jpg" alt=""> </body> </html>

Ширину для каждого из этих свойств не обязательно писать в пикселях, можно использовать и другие единицы CSS, такие как em, rem, проценты и др.

img {
  width: 100%; /* Гибкая ширина */
  min-width: 400px; /* Минимальная ширина в пикселях */
  max-width: 80%; /* Максимальная ширина в процентах */
}

Любое из этих свойств можно убрать, тогда ограничение ширины будет снизу или сверху.

img {
  width: 100%; /* Гибкая ширина */
  min-width: 400px; /* Ограничение снизу */
}
img {
width: 100%; /* Гибкая ширина */
max-width: 800px; /* Ограничение сверху */
}

Использование стилевой функций min()

Функция min() возвращает наименьшее значение из списка указанных значений и пишется как значение свойства width. Комбинация пикселей и процентов ограничивает ширину изображения сверху.

img {
  width: min(500px, 100%);
}

Максимальной шириной изображения в данном случае будет 500 пикселей, т. е. уменьшаться картинка может, а вот увеличиваться будет только до 500px по ширине (пример 2).

Пример 2. Использование min()

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Ширина</title> <style> img { width: min(500px, 100%); /* Максимальная ширина 600 пикселей */ margin: auto; display: block; /* Выравнивание по центру */ } </style> </head> <body> <img src="image/playfulcat.jpg" alt=""> </body> </html>

Использование стилевой функций max()

Схожим образом работает и функция max(), только она возвращает наибольшее значение из списка указанных значений. Комбинация пикселей и процентов ограничивает ширину изображения снизу.

img {
  width: max(400px, 100%);
}

В данном случае картинка будет занимать всю доступную ширину, но меньше 400 пикселей она стать не сможет (пример 3).

Пример 3. Использование max()

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Ширина</title> <style> img { width: max(400px, 100%); /* Минимальная ширина 400 пикселей */ margin: auto; display: block; /* Выравнивание по центру */ } </style> </head> <body> <img src="image/playfulcat.jpg" alt=""> </body> </html>
Изображения