Divコンテナの画像幅は適応性があり、高さは固定されており、歪んでいません。それを達成する方法は？

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/174277896468460.png?x-oss-process=image/resize,p_40" class="lazy" alt="Divコンテナの画像幅は適応性があり、高さは固定されており、歪んでいません。それを達成する方法は？">
</div>

解決策： CSS属性を使用して画像表示方法を制御して、適応型の画像幅と固定された高さを実現します。

修正コード：

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

width: auto; height: 100%; 、画像幅は容器の幅に応じて自動的に調整され、高さはコンテナの高さの100％に設定されます。このようにして、写真は元の割合を維持し、変形を避けるために容器にそのまま表示することができます。

キーポイント：親コンテナdivは明確な高さを設定する必要があります（たとえば、 height: 200px;または他の方法を使用して高さを決定する）。そうしないと、画像の高さを決定できず、適応効果を達成できません。実際のニーズに応じて、親コンテナの高さを調整できます。

上記の方法により、Divコンテナ内の適応幅、固定された高さ、歪みのない画像の問題を簡単に解決し、Webページレイアウトの全体的な効果を改善できます。

以上がDivコンテナの画像幅は適応性があり、高さは固定されており、歪んでいません。それを達成する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。