固定幅容器の歪みなしに、画像を高さに適応させる方法は？

Webページの写真の適応幅、割合を維持する：画像の歪みの問題を完全に解決する

Webデザインでは、画像が歪んでいないことを確認しながら、固定幅の容器に写真を埋め込む必要があることがよくあります。この記事では、実用的なケースを使用して、固定幅の容器内の高さに絵を適応させる方法を説明し、元の割合を維持します。

問題：開発者は、幅が50％のDivコンテナを使用して画像を表示しますが、画像の元の幅はコンテナ幅よりもはるかに大きく、画像が変形します。元のコードは次のとおりです。

<div style="width:50%;">
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/001/246/273/174269005866879.png?x-oss-process=image/resize,p_40" class="lazy" alt="固定幅容器の歪みなしに、画像を高さに適応させる方法は？">
</div>

目標：画像の幅が自動的にコンテナ幅に適応して、画像の歪みを避けるために、画像の高さのみを設定します。

解決策：CSSスタイルを通じて画像表示方法を制御します。画像のwidthプロパティをautoとheightプロパティを100%に設定します。このようにして、画像の高さが親コンテナを埋め、画像の割合が変更されないように、画像の元の割合に従って幅が自動的に調整されます。変更されたコードは次のとおりです。

<div style="width:50%;">
  <img src="/static/imghwm/default1.png" data-src="/seller/templates/img/bg_logo_left.png" class="lazy" alt=""   style="max-width:90%">
</div>

上記の方法により、写真は元の割合を維持しながら、幅50％の容器に完全に適応し、画像の歪みの問題を完全に解決します。

以上が固定幅容器の歪みなしに、画像を高さに適応させる方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。