場合によっては、画像を特定の寸法に適合させることが必要になることがあります。画像の幅と高さを指定することで画像のサイズを変更できます。一般的な解決策は、 最大幅: 100%; そして 高さ: 自動; 大きな画像がコンテナの幅を超えないようにします。の 最大幅 そして 最大高さ CSS のプロパティはより適切に機能しますが、多くのブラウザーではサポートされていません。

画像のサイズを変更する別の方法は、 オブジェクトフィット プロパティ 、画像に適合します。この CSS プロパティは、コンテンツ ボックスに合わせてビデオまたは画像のサイズを変更する方法を指定します。確立された幅と高さで要素がコンテナにどのように収まるかを定義します。

の オブジェクトフィット プロパティは通常、画像またはビデオに適用されます。このプロパティは、要素がそのコンテナの幅と高さにどのように応答するかを定義します。主に次の 5 つの値があります。 オブジェクトフィット のようなプロパティ 埋める、含む、カバー、なし、スケールダウン、初期 、 そして 継承する 。このプロパティのデフォルト値は次のとおりです。 '埋める' 。

例

この例では、 最大幅: 100%; そして 高さ: 自動; プロパティ。

 cell padding div { width: auto; text-align: center; padding: 15px; border: 3px solid red; } img { max-width: 100%; height: auto; } <img src="forest.webp"> 

出力

例

この例では、 オブジェクトフィット: カバー; 財産。

 div { width: 300px; height: auto; text-align: center; padding: 15px; border: 3px solid red; } img { object-fit: cover; } <img src="forest.webp" width="300" height="300"> 

出力

Javaで設定

上の例では、 カバー の値 オブジェクトフィット 財産。上の例と同様に、 オブジェクトフィット 画像のサイズを変更するにはプロパティを使用します。