Web 開発では、適応的な方法で画像を表示することが一般的な問題です。 CSS では、いくつかのトリックを使用して画像の自己適応を実現できます。 一般的な方法をいくつか示します。
1. max-width: 画像の最大幅を 100% に設定します。 このとき、ピクチャの元の幅がコンテナの幅より小さい場合は元のサイズで表示され、元の幅がコンテナの幅より大きい場合は、コンテナの幅に縮小されて表示されます。コンテナ。 コードは次のとおりです。
img {
max-width: 100%;
}
2. object-fit: この属性は、コンテナ内の画像の塗りつぶし方法を設定するために使用されます。 デフォルト値は「fill」で、コンテナを満たすように画像を引き伸ばします。 画像を元の比率を維持したい場合は、"con@tain"に設定できます。 コードは次のとおりです。
img {
width: 100%;
height: 300px;
object-fit: contain;
}
3. background-size: この属性は、背景画像のサイズを制御するために使用されます。 通常、この属性を使用してレスポンシブな背景画像を実装します。 コードは次のとおりです。
.bg {
background-image: url("bg.jpg");
background-size: cover;
}
上記の方法により、適応的な方法でさまざまなデバイスに画像を簡単に表示できます。