Wie erreicht man 100 % Breite oder Höhe und behält gleichzeitig das Seitenverhältnis in CSS bei?

100 % Breite oder Höhe erreichen und gleichzeitig das Seitenverhältnis in CSS beibehalten

In CSS ist es möglich, die Breite auf 100 % einzustellen und die Höhe auf „Automatisch“ zu belassen (oder umgekehrt). Wird oft verwendet, um ein Bild einzuschränken. Dies kann jedoch dazu führen, dass das Bild unverhältnismäßig breit oder hoch ist.

Um das Seitenverhältnis beizubehalten und gleichzeitig das Bild einzuschränken, sollten Sie die folgenden Ansätze in Betracht ziehen:

Einschränken und Zuschneiden mithilfe eines DIV :

Verschachteln Sie das Bild in einem DIV und legen Sie dessen maximale Breite, maximale Höhe und Überlauf fest: versteckt. Dadurch wird verhindert, dass das Bild die angegebenen Abmessungen überschreitet und zu viel abgeschnitten wird.

Seitenverhältnis beibehalten und maximale Abmessungen begrenzen:

Verwenden Sie die maximale Breite und maximale Höhe Eigenschaften ohne Angabe von Mindestabmessungen. Dadurch behält das Bild sein Seitenverhältnis bei und stellt gleichzeitig sicher, dass es nicht größer wird als die angegebenen maximalen Abmessungen.

Beispielcode:

<code class="css">.image-container {
  max-width: 500px;
  max-height: 500px;
  overflow: hidden;
}

.image {
  width: 100%;
  height: auto;
}</code>

Dieser Code gewährleistet dass das Bild im .image-Container weder in der Breite noch in der Höhe 500 Pixel überschreitet und dabei sein ursprüngliches Seitenverhältnis beibehält.

Das obige ist der detaillierte Inhalt vonWie erreicht man 100 % Breite oder Höhe und behält gleichzeitig das Seitenverhältnis in CSS bei?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!