CSS でアスペクト比を維持しながら 100% の幅または高さを達成するにはどうすればよいですか?

CSS でアスペクト比を維持しながら幅または高さ 100% を達成する

CSS で幅を 100% に設定し、高さを自動に設定したままにすると (またはその逆)、画像を制限するためによく使用されます。ただし、これにより、画像の幅または高さが不釣り合いになる可能性があります。

画像を制限しながらアスペクト比を維持するには、次のアプローチを検討してください。

DIV を使用した制限とトリミング:

DIV 内で画像をネストし、その最大幅、最大高さ、およびオーバーフローを非表示に設定します。これにより、画像が指定された寸法を超えず、余分な部分がトリミングされます。

縦横比を保持し、最大寸法を制限する:

最大幅と最大高さを使用します。最小寸法を指定しないプロパティ。これにより、指定された最大サイズを超えて画像が大きくならないようにしながら、画像のアスペクト比を維持できます。

コード例:

<code class="css">.image-container {
  max-width: 500px;
  max-height: 500px;
  overflow: hidden;
}

.image {
  width: 100%;
  height: auto;
}</code>

このコードでは、次のことが保証されます。 .image-container 内の画像は、元のアスペクト比を維持しながら、幅または高さが 500 ピクセルを超えないこと。

以上がCSS でアスペクト比を維持しながら 100% の幅または高さを達成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。