CSS でサイズ変更するときに画像のアスペクト比を維持するにはどうすればよいですか?

CSS での画像のサイズ変更の問題を解決する

管理パネルで画像のサイズ変更の問題に直面した場合、CSS プロパティの相互作用を理解することが重要です。このような問題の 1 つは、最初は完全に表示されていた画像のサイズを変更するときに発生します。ただし、ブラウザのサイズを変更すると、画像が不均衡に縮小します。

これに対処するには、画像のアスペクト比を維持することが重要です。これは、一方の寸法を固定しながら、もう一方の寸法を自動調整できることを意味します。幅を固定し、高さを auto に設定すると、画像の元の比率が維持されます。

たとえば、次のコード スニペットを考えてみましょう。

img {
  display: block;
}
.correct,
.incorrect {
  border: 1px solid red;
  display: inline-block;
}
.incorrect img {
  max-width: 100%;
  width: 100px;
  height: 100px;
}
.correct img {
  max-width: 100%;
  width: 200px;
  height: auto;
}

この例では、「. 「correct」クラスは、幅を固定値 (200px) に設定し、高さを自動調整させることでアスペクト比を維持します。これにより、サイズ変更時に画像が引き伸ばされなくなります。

逆に、「.incorrect」クラスでは、幅と高さの両方が固定されているため、画像が引き伸ばされます。これにより、アスペクト比が崩れ、画像の意図した寸法が失われます。

適切な CSS プロパティを採用することで、ブラウザ ウィンドウのサイズに関係なく、画像のサイズを適切に変更し、視覚的な整合性を維持できます。

以上がCSS でサイズ変更するときに画像のアスペクト比を維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。