Картинка по размеру блока
Часто возникает необходимость растянуть картинку по размеру блока с сохранением пропорций, чтобы изображение не искажалось. При этом результат бывает нужен разный. Иногда нужно обязательно заполнить всё пространство блока. А иногда важно отобразить всю картинку. Для этого в CSS есть свойство object-fit . Оно может иметь такие значения:
object-fit: fill — картинка просто заполняет блок без сохранения пропорций (по умолчанию)
object-fit: cover — картинка полностью заполняет всё пространство блока. Края изображения могут быть обрезаны из за того, что форма блока не совпадает с формой картинки.
object-fit: contain — вся картинка отображается в блоке. Часть блока может быть не заполнена из за того, что форма блока не совпадает с формой картинки.
object-fit: none — картинка отображается в своём реальном масштабе
object-fit: scale-down — соответствует либо contain либо none . Из этих вариантов выбирает тот, который меньше.
object-fit: initial — возвращает значение по умолчанию, если ранее изображению было установлено другое значение
Как заполнить картинкой весь блок css
Многие для вписывания картинки в блок используют background-image. Но есть один метод, который безболезненно и (почти) на всех браузерах поможет вам без лишних заморочек вписать img в div.
Делается этот хитрый трюк через padding-top и абсолютное позиционирование. Родительскому элементу указываем:
- height: 0;
- padding-top: 130%;
- position: relative;
- display: block;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- max-height: 100%;
- max-width: 100%;
В итоге картинка вытягивается по блоку с 0 высотой, а также изменяя padding-top (на 100% картинка вписывается в квадрат) мы можем изменять фигуру вписывания. А также можем через object-fit: cover сделать картинку замещаемой (но для ie11 нужно использовать полифил).
Результат на CodePen (правда там результат с object-fit: cover, но обратно превратить результат в вмещаемую картинку проще).
Картинка по размеру блока
Часто возникает необходимость растянуть картинку по размеру блока с сохранением пропорций, чтобы изображение не искажалось. При этом результат бывает нужен разный. Иногда нужно обязательно заполнить всё пространство блока. А иногда важно отобразить всю картинку. Для этого в CSS есть свойство object-fit . Оно может иметь такие значения:
object-fit: fill — картинка просто заполняет блок без сохранения пропорций (по умолчанию)
object-fit: cover — картинка полностью заполняет всё пространство блока. Края изображения могут быть обрезаны из за того, что форма блока не совпадает с формой картинки.
object-fit: contain — вся картинка отображается в блоке. Часть блока может быть не заполнена из за того, что форма блока не совпадает с формой картинки.
object-fit: none — картинка отображается в своём реальном масштабе
object-fit: scale-down — соответствует либо contain либо none . Из этих вариантов выбирает тот, который меньше.
object-fit: initial — возвращает значение по умолчанию, если ранее изображению было установлено другое значение
How to fill a box with an image without distorting it
In this guide you can learn a technique for causing an HTML image to completely fill a box.
Using object-fit
When you add an image to a page using the HTML <img> element, the image will maintain the size and aspect ratio of the image file, or that of any HTML width or height attributes. Sometimes you would like the image to completely fill the box that you have placed it in. In that case you first need to decide what happens if the image is the wrong aspect ratio for the container.
- The image should completely fill the box, retaining aspect ratio, and cropping any excess on the side that is too big to fit.
- The image should fit inside the box, with the background showing through as bars on the too-small side.
- The image should fill the box and stretch, which may mean it displays at the wrong aspect ratio.
The object-fit property makes each of these approaches possible. In the example below you can see how different values of object-fit work when using the same image. Select the approach that works best for your design.
Как полностью заполнить блок изображением?
На момент публикации ответа, свойство не поддерживается браузерами ИЕ и Эдж, для Оперы мини необходимо использовать префикс -o- . Покрытие рынка браузеров — 79,1%.
Если у вас очень много изображений, а их вывод происходит путем какого либо серверного языка, то можно поступить еще иначе
Если вам нужно именно img , то можно для картинки сделать position: absolute и дальше играться:
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.6.15.43494
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
How to fill a box with an image without distorting it
In this guide you can learn a technique for causing an HTML image to completely fill a box.
Using object-fit
When you add an image to a page using the HTML <img> element, the image will maintain the size and aspect ratio of the image file, or that of any HTML width or height attributes. Sometimes you would like the image to completely fill the box that you have placed it in. In that case you first need to decide what happens if the image is the wrong aspect ratio for the container.
- The image should completely fill the box, retaining aspect ratio, and cropping any excess on the side that is too big to fit.
- The image should fit inside the box, with the background showing through as bars on the too-small side.
- The image should fill the box and stretch, which may mean it displays at the wrong aspect ratio.
The object-fit property makes each of these approaches possible. In the example below you can see how different values of object-fit work when using the same image. Select the approach that works best for your design.
Как полностью заполнить блок изображением?
На момент публикации ответа, свойство не поддерживается браузерами ИЕ и Эдж, для Оперы мини необходимо использовать префикс -o- . Покрытие рынка браузеров — 79,1%.
Если у вас очень много изображений, а их вывод происходит путем какого либо серверного языка, то можно поступить еще иначе
Если вам нужно именно img , то можно для картинки сделать position: absolute и дальше играться:
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.8.2.43556
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.