フレックスボックスコンテナの内側の画像を塗りつぶす/覆う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のflex-itemsでした。

ありがとうございます！

Answer 1

imgにはobject-fit: coverを設定できます。 a要素は、object-fitを動作させるためにフレックスボックスでなければなりません。

注：デモ専用のresize: both;〜.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>

を見るために .flex-innerのサイズを変更することができます