Wie kann ich sicherstellen, dass ein Bild eine bestimmte Größe nicht überschreitet und gleichzeitig das Seitenverhältnis beibehält, wenn in CSS 100 % Breite oder Höhe verwendet werden?

Festlegen von Seitenverhältnisbeschränkungen für 100 % Breite oder Höhe in CSS

In CSS bleibt das Seitenverhältnis erhalten, wenn einem Bild eine Breite oder Höhe von 100 % zugewiesen wird, es kann jedoch zu Ergebnissen kommen Das Bild ist zu groß oder zu klein für die gewünschte Position.

Eine mögliche Lösung besteht darin, das Bild in einem DIV zu platzieren und overflow:hidden anzuwenden, um überschüssiges Bild abzuschneiden. Dies begrenzt jedoch nur die Größe des Bildes und hat keinen Einfluss auf das Seitenverhältnis.

Wenn die Beibehaltung des Seitenverhältnisses nicht erforderlich ist, kann dies durch Festlegen der Eigenschaften „max-widd“ und „max-height“ am Bild sichergestellt werden Eine bestimmte Größe darf nicht überschritten werden, während das Seitenverhältnis erhalten bleibt. Durch Festlegen dieser maximalen Abmessungen wird die Größe des Bildes entsprechend angepasst, damit es in die angegebenen Grenzen passt.

Beispiel:

<code class="css">img {
  max-width: 200px;
  max-height: 150px;
}</code>

Bei diesem Ansatz wird das Bild nicht breiter als 200 Pixel oder 150 Pixel hoch, unter Beibehaltung des Seitenverhältnisses.

Das obige ist der detaillierte Inhalt vonWie kann ich sicherstellen, dass ein Bild eine bestimmte Größe nicht überschreitet und gleichzeitig das Seitenverhältnis beibehält, wenn in CSS 100 % Breite oder Höhe verwendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!