Heim  >  Artikel  >  Web-Frontend  >  Wie passt man ein Bild in ein Div ein und behält dabei das Seitenverhältnis bei?

Wie passt man ein Bild in ein Div ein und behält dabei das Seitenverhältnis bei?

Susan Sarandon
Susan SarandonOriginal
2024-11-09 19:19:02747Durchsuche

How to Fit an Image Inside a Div While Maintaining Aspect Ratio?

Ein Bild in ein Div einpassen und dabei das Seitenverhältnis beibehalten

Um das Ziel zu erreichen, ein Bild nahtlos in ein bestimmtes Div einzupassen und dabei das Seitenverhältnis beizubehalten Seitenverhältnis, HTML- und CSS-Techniken können eingesetzt werden effektiv.

Lösung:

Um dieses gewünschte Verhalten zu erreichen, weisen Sie dem Bildelement, das sich innerhalb des div befindet, die folgenden CSS-Eigenschaften zu:

  • max-height: 100%;: Dadurch wird die vertikale Höhe des Bildes auf die Höhe des Div beschränkt und so sichergestellt überschreitet nicht den verfügbaren Platz.
  • max-width: 100 %;: Ebenso begrenzt diese Eigenschaft die horizontale Breite des Bildes auf die Breite des Div und verhindert so ein Überlaufen.

Durch die Einbeziehung dieser CSS-Einstellungen wird das Bild automatisch verkleinert, um bequem in die Abmessungen des Div zu passen, ohne sein ursprüngliches Aussehen zu verzerren Verhältnis. Dadurch wird sichergestellt, dass das Bild vollständig sichtbar bleibt und die angegebenen räumlichen Einschränkungen eingehalten werden.

Das obige ist der detaillierte Inhalt vonWie passt man ein Bild in ein Div ein und behält dabei das Seitenverhältnis bei?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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