オブジェクトにフィットしてオブジェクトに画像が埋め込まれていない画像

Question

私は、背の高さよりも広いバナー画像を持っています。私は異なるサイズの画像を表示するコンテナdivを持っています。バナースタイルでは、ストレッチやスカッシュして親divを両方向に塗りつぶす必要があります。私はobject-fit:fillを見てきましたが、画像を水平に伸ばしているように見えます。divを垂直方向に塗りつぶすことについては何もしません。

実例はhereです。コードは次のようになります。私が間違っているのは何

.tile { 
 
    position: relative; 
 
    float: left; 
 
    margin: 10px; 
 
    border: 4px solid green; 
 
    height: 400px; 
 
} 
 

 
.deal { 
 
    width: 342px; 
 
    background: #ffffff; 
 
} 
 

 
.tileImage.promo { 
 
    object-fit: fill; 
 
}

<div class="tile deal hsNational active"> 
 
    <img class="tileImage promo" src="https://cdn.pixabay.com/photo/2015/12/13/09/42/banner-1090835_960_720.jpg" height="200px"> 
 
</div>

？ （私はobject-fitのさまざまな値を試しましたが、必要なものはどれも行いません）。イメージは水平に押しつぶされ、緑の枠内の領域を完全に埋めるように垂直に引き伸ばされます。

Answer 1

その後、object-fit作品画像のための寸法を定義します。ここ

.tile { 
 
    position: relative; 
 
    float: left; 
 
    margin: 10px; 
 
    border: 4px solid green; 
 
    height: 400px; 
 
} 
 

 
.deal { 
 
    width: 342px; 
 
    background: #ffffff; 
 
} 
 

 
.tileImage.promo { 
 
    object-fit: fill; /* also try 'contain' and 'cover' */ 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="tile deal hsNational active"> 
 
    <img class="tileImage promo" src="https://cdn.pixabay.com/photo/2015/12/13/09/42/banner-1090835_960_720.jpg"> 
 
</div>

詳細：Why isn't object-fit working in flexbox?