Принудительное изображение внутри контейнера из гибкой коробки для заполнения/покрытия 100%

Question

Я относительно новичок в кодировании и нуждаюсь в вашей помощи.

Вот codepen: http://codepen.io/anon/pen/NdMjZy

<div class="flex-item w50 fill"> 
    <div class="flex-inner portfolio"> 
     <a href=""> 
      <img src="" alt=""> 
     </a> 
    </div> 
</div> 

Что мне нужно: Изображения должны заполнить/крышка контейнера гибкого элемента. Они должны быть сосредоточены и оставаться в соотношении сторон.

Вы можете видеть, что изображения со стульями не являются высотой 100%.

Я попытался использовать imagefill.js, но это привело к 0px height flex-items.

Спасибо заранее!

Answer 1

Вы можете установить object-fit: cover для вашего img. Ваш элемент a должен быть гибким, чтобы сделать работу object-fit.

Отметьте, что: Я просто добавляю resize: both; в .flex-inner только для демонстрации. Вы можете изменить размер .flex-inner, чтобы увидеть эффект

.flex-inner { 
 
    width: 200px; 
 
    height: 200px; 
 
    resize: both; 
 
    overflow: auto; 
 
} 
 

 
.flex-inner a { 
 
    display: flex; 
 
    width: 100%; 
 
    height: 100%; 
 
    border: solid 1px #123; 
 
} 
 

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

<div class="flex-inner"> 
 
    <a href=""> 
 
    <img src="http://via.placeholder.com/500x200" alt=""> 
 
    </a> 
 
</div>