Удалить заполнение при подгонке объекта: содержать (слой масштабирования изображения) - PullRequest
Новая
       7

Удалить заполнение при подгонке объекта: содержать (слой масштабирования изображения)

0 голосов
/ 27 февраля 2020

Я опишу проблему вкратце (я использовал разные цвета для divs):

Это моя текущая ситуация с моим макетом:

Текущая ситуация

И когда я изменяю размеры по вертикали, браузер windows происходит так:

Текущая ситуация изменяется по вертикали

Мой html код: 

  <div class="wrap-container">         <!-- Yellow container-->
    <div class="wrap">                 <!-- Grey container-->
      <div class="image">              <!-- Aqua container-->
        <img src="images/me.png"/>     <!-- Red container-->
      </div>
   </div>
 </div>

А у меня CSS: 

.wrap-container{
  background-color: yellow;
}

.wrap{
  background: grey;
  display: flex;
  justify-content: flex-start;
}

.image-container{
  height: 100%;
  background: aqua;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  img{
    height: 80%;
    object-fit: contain;
    object-position: left;
    background: red;
    max-width: 368px; /* the original width of the image */
    max-height: 332px; /* the original height of the image */
 }
}

Я хочу, чтобы аква-бокс масштабировался с изображением (поэтому красный цвет никогда не должен быть виден), как показано ниже:

Желаемый окончательный макет

Заранее спасибо! :)

1 Ответ

0 голосов
/ 27 февраля 2020

Ваш предоставленный код не воссоздает показанные вами условия, но самый простой способ добиться того, что вы хотите, это изменить object-fit: contain; на object-fit: cover;

Я старался изо всех сил воссоздать ваши условия и сделал несколько правок для упрощения элементов управления.

Значение justify: flex-end в классе изображений не имеет смысла, и значения высоты% работали против вас, поэтому я обменял его на отступы. 

.wrap-container {
  background-color: yellow;
  display: flex;
  justify-content: center;
  width: 100%;
}

.wrap {
  background: grey;
  display: flex;
  width: 100%;
  max-width: 450px;
}

.image {
  background: aqua;
  padding-top: 10%;
  Width: 50%;
  display: flex;
  flex-direction: column;
}

img {
  background: red;
  object-fit: cover;
  object-position: center;
  max-height: 300px;
}
<div class="wrap-container">
  <!-- Yellow container-->
  <div class="wrap">
    <!-- Grey container-->
    <div class="image">
      <!-- Aqua container-->
      <img src="https://source.unsplash.com/random" />
      <!-- Red container-->
    </div>
  </div>
</div>
...