Адаптивное изображение с фиксированным соотношение сторон

Question

Есть следующая структура. Большое фото должно быть с фиксированным соотношением сторон 3:5. Как можно задать эти пропорции, и как сделать, чтобы при разных разрешениях экрана это фото было с соответствующими размерами, но не больше 100% высоты и 80% ширины размера родителя .photos? Крайне желательно без JS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.top {
  flex: 1px;
}

.photos {
  position: relative;
  height: calc(100% - 79px);
}

.small_photo {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40%;
}

.small_photo_1 {
  left: 0;
}

.small_photo_2 {
  right: 0;
}

.small_photo img {
  width: 100%;
  opacity: .5;
}

.big_photo {
  height: 100%;
  width: 60%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.big_photo img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.controls {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: -42px;
}

.control_btn {
  width: 121px;
  height: 121px;
  text-align: center;
  line-height: 121px;
  background-color: #eee;
}

.control_info {
  width: 60%;
  height: 79px;
  background-color: #eee;
}

.bottom {
  padding: 22px 20px;
  display: flex;
  justify-content: space-between;
}

.bottom_btn {
  background-color: #eee;
  line-height: 28px;
  padding: 0 20px;
}

<div class="wrapper">
  <div class="top">
    <div class="photos">
      <div class="small_photo small_photo_1">
        <img src="https://images.pexels.com/photos/1562/italian-landscape-mountains-nature.jpg" alt="">
      </div>
      <div class="big_photo">
        <img src="https://images.pexels.com/photos/1562/italian-landscape-mountains-nature.jpg" alt="">
      </div>
      <div class="small_photo small_photo_2">
        <img src="https://images.pexels.com/photos/1562/italian-landscape-mountains-nature.jpg" alt="">
      </div>
    </div>
    <div class="controls">
      <div class="control_btn">prev</div>
      <div class="control_info">some text</div>
      <div class="control_btn">next</div>
    </div>
  </div>
  <div class="bottom">
    <div class="bottom_btn">bottom button</div>
    <div class="bottom_btn">bottom button</div>
    <div class="bottom_btn">bottom button</div>
    <div class="bottom_btn">bottom button</div>
  </div>
</div>

БЛОГ НА HUSL

Адаптивное изображение с фиксированным соотношение сторон

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