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

画像のサイズ変更中にアスペクト比を維持する

画像のアスペクト比は、サイズ変更時に画像の元の比率を維持するために重要です。この問題は、画像に事前定義された幅と高さの属性があり、追加の CSS ルールが適用される場合に明らかになります。

たとえば、以下のコードでは、画像「big_image.jpg」の高さと幅が明示的に 600 と定義されています。それぞれ、

<img src="/static/imghwm/default1.png" data-src="big_image.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="">

アスペクト比を維持しながら画像のサイズを強制的に変更するには、CSS ルールを使用できます。この場合、次の CSS ルールを使用できます:

img {
    max-width: 500px;
}

ただし、この CSS ルールでは画像が適切なサイズに縮小されない可能性があります。これに対処するには、追加の CSS プロパティを使用する必要があります。

img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}

これらの CSS プロパティを使用すると、画像「big_image.jpg」のアスペクト比を維持しながらサイズが変更されます。これは、次の HTML および CSS コードで示されています:

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img  src="/static/imghwm/default1.png" data-src="https://i.sstatic.net/aEEkn.png" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="CSS を使用してサイズ変更中に画像のアスペクト比を維持するにはどうすればよいですか?" >

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