Речь идет о том, чтобы показать изображение внутри контейнера так, чтобы оно заполнило собой весь контейнер, но при этом не изменились пропорции картинки.
Сейчас это актуально в связи с необходимостью поддержки отображения сайта на мобильных устройствах.
Способ № 1 — использование background-size
Если есть возможность вместо вывода картинки, url изображения подставить на задний фон контейнера, то используйте следующие стили:
|
1 2 3 4 |
.container { background: url(/your-image-url/image.jpg) no-repeat center center; background-size: cover; } |
«Cover» хорошо поддерживается всеми браузерами и вы обойдетесь всего одним контейнером для создания нужного эффекта.
Способ №2 — использование CSS свойства object-fit
Этот способ позволяет нам тот же фокус провернуть непосредственно с контейнером, к примеру <img>. Поддержка браузерами похуже, но использовать удобнее, если речь идет о изменении поведения в контейнерах <img>, <video>, <object>, <input type=’image’>.
Пример использования:
|
1 2 3 4 5 6 7 8 9 10 11 |
<html> ... <img src="/your-image-url/image.jpg" width=800 height=600 /> <style> img { object-fit: cover; } </style> ... </html> |
Какой бы URL вы не вставили в картинку — она заполнит собой весь контейнер изображения.
Способ № 3 — использование CSS свойства overflow.
Этот способ более сложный, но в ряде случаев может оказаться незаменимым. Он не использует новых CSS свойств, но требует обернуть IMG в какой то контейнер.
|
1 2 3 |
<div class="container"> <img ... /> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.container { overflow: hidden; img { min-height: 100%; min-width: 100%; width: auto; height: auto; max-width: none; max-height: none; display: block; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); } } |
Размеры изображения будут зависеть от размеров контейнера. Всё «лишнее» будет скрыто с помощью overflow: hidden.