メイクの画像は、そのコンテナ

Question

に合わせ、私は次のコードを持っている：

#container { 
 
    background: steelblue; 
 
    width: 333px; 
 
    height: 333px; 
 
} 
 

 
picture img { 
 
    object-fit: cover; 
 
}

<div id="container"> 
 
    <picture> 
 
    <img src="http://placekitten.com/g/300/300" alt="kitten"> 
 
    </picture> 
 
</div>

をどのように私は絵がコンテナボックスを埋めるために得ることができますか？

Here's a codepen。

Answer 1

これは、コンテナの任意のサイズのため、動作します。

そうのような：これは重要であるだけで包み、マイクはすでにそれだけで追加したいと回答

#container { 
 
    background: steelblue; 
 
    width: 333px; 
 
    height: 500px; 
 
    
 
} 
 
picture { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    
 
} 
 
picture img { 
 
object-fit: cover; 
 
    height: auto; 
 
    width:100%; 
 
}

<div id="container"> 
 
    <picture> 
 
    <img src="http://placekitten.com/g/300/300" alt="kitten">  
 
    </picture> 
 
</div>

Answer 2

あなたは絵とのimg要素の両方を伸ばす必要があります：

#container { 
    background: steelblue; 
    width: 333px; 
    height: 333px; 
} 

picture, img { 
    width: 100%; 
    height: 100%; 
} 

Answer 3

はちょうどあなたのIMGにwidth: 100%;を追加します。両方が正方形の場合、コンテナにフィットします。

Answer 4

最も簡単な方法は、imgにwidthとheightを追加することです：

img { 
    width : 100%; 
    height: 100%; 
} 

はまた、要素がそのコンテナに合わせてサイズ変更する方法を指定するobject-fitCSSプロパティを使用しています。

object-fit: contain; 

としてMDN documentationあたり：アスペクト比を維持するため

を

含む置換コンテンツは、そのアスペクト比を維持するために 要素のコンテンツボックス内にフィットしながら、スケーリングされます。

あなたが（「IMG」の object-fitプロパティと組み合わせて）「絵」要素に display:flexを使用する必要が