Как растянуть и изображение на адаптивном сайте в CSS
У меня есть серия изображений в слайд-шоу, которые должны быть загружены с разными размерами изображения. Я хочу, чтобы все изображения следовали правилу, согласно которому они растягиваются пропорционально максимальной ширине, чтобы при изменении размера окна браузера они все еще сохранят свою реакцию изменения размера жидкости.
Вот шаблон сайта и изображения в вопросе.
Хотелось бы сделать это в CSS, если это возможно.
У меня проблемы с растяжением маленьких изображений, чтобы они помещались в больший контейнер, вместо того, чтобы пытаться хранить большие изображения в маленьком контейнере. Обычно уменьшенное изображение перестает изменять размер, как только оно достигает фактического затемнения пикселей, и я хочу, чтобы они продолжали пропорционально растягиваться, даже если это пикселирует их.
1 ответ
Ключом к решению этой проблемы является использование фоновых изображений и их свойств CSS. Вместо того, чтобы вставлять изображения как <img> теги, вы должны создавать контейнеры с набором фонового изображения
<div class="slide" style="background-image: url(image1.jpg)"></div>
Дайте этим контейнерам немного стиля, чтобы они заполнили вашу область слайд-шоу.
position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%;
Тогда вы можете использовать background-size: contain; чтобы изображение находилось внутри контейнеров, используя чистый CSS. Он никогда не выйдет за пределы области, но заполнит его как можно больше. Также используйте background-position: center; и отключите повтор изображения, используя background-repeat: no-repeat; - тогда у вас будет одно изображение по центру и настолько большое, насколько это возможно.
Полный CSS выглядит следующим образом:
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
Вы сможете использовать CSS-переходы для управления тем, как слайд-шоу перемещается между слайдами.