Die Bildbreite im Div -Behälter ist adaptiv, die Höhe ist festgelegt und nicht verzerrt. Wie kann man es erreichen?

Adaptive Anzeige von Webbildern: Proportionen beibehalten und Verformungen vermeiden

Das Bildverviel von Bild ist ein häufiges Problem im Webdesign. Wenn die Bildbreite den Container überschreitet, ist die Aufrechterhaltung des Bildanteils ohne Verzerrung für viele Entwickler eine Herausforderung. In diesem Artikel wird ausführlich erläutert, wie dieses Problem durch einen Fall gelöst werden kann.

Problem: Ein Div -Container mit einer Breite von 50% muss ein breites Bild aufnehmen. Wenn Sie es direkt einfügen, wird das Bild komprimiert und deformiert. Das Ziel ist: Die Bildhöhe ist festgelegt, die Breite wird automatisch an den Container angepasst, während die ursprünglichen Proportionen beibehalten werden, um Verzerrungen zu vermeiden.

Anfangscode:

<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="Die Bildbreite im Div -Behälter ist adaptiv, die Höhe ist festgelegt und nicht verzerrt. Wie kann man es erreichen?">
</div>

Lösung: Verwenden Sie CSS -Attribute, um die Bildanzeigemethode zu steuern, um die adaptive Bildbreite und die feste Höhe zu erreichen.

Geänderter Code:

<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>

Mit width: auto; height: 100%; Die Bildbreite wird automatisch entsprechend der Behälterbreite eingestellt und die Höhe wird auf 100% der Behälterhöhe eingestellt. Auf diese Weise kann das Bild seinen ursprünglichen Anteil beibehalten und im intakten Container angezeigt werden, um eine Verformung zu vermeiden.

Schlüsselpunkt: Der übergeordnete Container -Div muss eine klare Höhe festlegen (z. B. height: 200px; oder andere Methoden zur Bestimmung der Höhe verwenden), andernfalls kann die Bildhöhe nicht bestimmt werden und der adaptive Effekt kann nicht erreicht werden. Sie können die Höhe des übergeordneten Containers entsprechend den tatsächlichen Anforderungen einstellen.

Mit den oben genannten Methoden können Sie das Problem der adaptiven Breite, der festen Höhe und unverzerrten Bilder im Div -Container leicht lösen und den Gesamteffekt des Webseitenlayouts verbessern.

Das obige ist der detaillierte Inhalt vonDie Bildbreite im Div -Behälter ist adaptiv, die Höhe ist festgelegt und nicht verzerrt. Wie kann man es erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!