Адаптивные изображения в CSS

Question

помогите пожалуйста с CSS на моём сайте.

Как будет правильно сделать следующий функционал?

1)Изображение было по центру экрана.(можно задействовать position:fixed)

2)Изображение не должно выходить за рамки экрана или контейнера.

3)При изменении горизонтального изображения на вертикальное , было видно большую часть картинки.

Вот пример двух изображений: https://images.unsplash.com/photo-1581888517319-570283943d82?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjF9&auto=format&fit=crop&w=750&q=80 (вертикальное)

https://images.unsplash.com/photo-1534759846116-5799c33ce22a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1376&q=80 (горизонтальное)

Писать javascript для изменения изображений не обязательно.

Answer 1

В background-size действуют такие правила как:

cover - cмещаемый контент меняет свой размер таким образом, чтобы сохранять свои пропорции при заполнении блока: окончательный размер контента будет определен как "покрытие" блока, ограничиваясь его шириной и высотой.

contain - смещаемый контент меняет свой размер таким образом, чтобы подстроится под область внутри блока пропорционально собственным параметрам: окончательный размер контента будет определен как "помещенный внутрь" блока, ограничиваясь его шириной и высотой.

Данные правила действую и в свойстве object-fit, которое работает для тега <img> и <video>.

Пример использования:

h4 {margin-bottom: 0;}

.viewport {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 180px;
  height: 50vh;
  max-height: 500px;
  margin-bottom: 20px;
  overflow: hidden;
  background: red;
}

.viewport.-bg .img,
.viewport.-img .img {
  display: block;
  width: 50%;
  height: 100%;
}

.viewport.-bg .img {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
}

.viewport.-bg .img.-vertical {
  background-image: url('https://i.imgur.com/ArGfW4l.png');
}

.viewport.-bg .img.-horizontal {
  background-image: url('https://i.imgur.com/Qjz8bz0.png');
}

.viewport.-bg.-cover .img {
  background-size: cover;
}

.viewport.-bg.-contain .img {
  background-size: contain;
}

.viewport.-img .img > img {
  width: 100%;
  height: 100%;
}

.viewport.-img.-cover .img > img {
  object-fit: cover;
}

.viewport.-img.-contain .img > img{
  object-fit: contain;
}

<h2>background-size</h2>

<h4>Без свойства</h4>
<div class="viewport -default -bg">
  <div class="img -vertical"></div>
  <div class="img -horizontal"></div>
</div>

<h4>С background-size: cover</h4>
<div class="viewport -cover -bg">
  <div class="img -vertical"></div>
  <div class="img -horizontal"></div>
</div>

<h4>С background-size: contain</h4>
<div class="viewport -contain -bg">
  <div class="img -vertical"></div>
  <div class="img -horizontal"></div>
</div>

<hr>

<h2>object-fit</h2>

<h4>Без свойства</h4>
<div class="viewport -default -img">
  <div class="img -vertical">
    <img src="https://i.imgur.com/ArGfW4l.png">
  </div>
  <div class="img -horizontal">
    <img src="https://i.imgur.com/Qjz8bz0.png">
  </div>
</div>

<h4>с object-fit: cover</h4>
<div class="viewport -cover -img">
  <div class="img -vertical">
    <img src="https://i.imgur.com/ArGfW4l.png">
  </div>
  <div class="img -horizontal">
    <img src="https://i.imgur.com/Qjz8bz0.png">
  </div>
</div>

<h4>с object-fit: contain</h4>
<div class="viewport -contain -img">
  <div class="img -vertical">
    <img src="https://i.imgur.com/ArGfW4l.png">
  </div>
  <div class="img -horizontal">
    <img src="https://i.imgur.com/Qjz8bz0.png">
  </div>
</div>

БЛОГ НА HUSL

Адаптивные изображения в CSS

Ответы (1 шт):