Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie kann das Seitenverhältnis beibehalten werden, während ein Bild in ein Div eingepasst wird?

Barbara Streisand
Freigeben: 2024-11-10 08:43:03
Original
486 Leute haben es durchsucht

How to Preserve Aspect Ratio While Fitting an Image Within a Div?

Beibehalten des Seitenverhältnisses beim Einpassen eines Bildes in ein Div

Bei der Anzeige eines Bildes auf engstem Raum ist es oft wünschenswert, es einzupassen, ohne das Seitenverhältnis zu beeinträchtigen. HTML und CSS bieten eine elegante Lösung, um dies zu erreichen.

Ansatz

Der Schlüssel zum Beibehalten des Seitenverhältnisses des Bildes liegt in der Verwendung der CSS-Eigenschaften max-height und max-width. So implementieren Sie es:

  1. Legen Sie die Div-Höhe und -Breite fest: Bestimmen Sie die gewünschte Höhe und Breite des Div, das das Bild enthalten soll.
  2. Wenden Sie max-height und max-width an Bild:

    • max-height: 100 %;: Stellt sicher, dass die Bildhöhe die Höhe des Divs nicht überschreitet.
    • max-width: 100 %;: Verhindert das Bild Breite davon ab, über die Breite des Divs hinauszulaufen.

Von Dadurch wird das Bild innerhalb der Div-Grenzen verkleinert oder vergrößert, während sein Seitenverhältnis erhalten bleibt.

Beispiel

Betrachten Sie den folgenden HTML- und CSS-Code:

<div>
Nach dem Login kopieren

In In diesem Beispiel passt das Bild „my-image.jpg“ seine Größe dynamisch an das 48x48-Div an und behält dabei sein Original bei Proportionen.

Das obige ist der detaillierte Inhalt vonWie kann das Seitenverhältnis beibehalten werden, während ein Bild in ein Div eingepasst wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!