Beibehalten des Seitenverhältnisses mit 100 % Breite oder Höhe in CSS

Bei der Verwendung von CSS müssen wir häufig die Breite oder Höhe von Bildern festlegen auf 100 %. Dies kann jedoch dazu führen, dass das Bild verzerrt wird. Dies liegt daran, dass das Seitenverhältnis (die proportionale Beziehung zwischen der Breite und Höhe des Bildes) nicht beibehalten wird.

Um das Seitenverhältnis bei Verwendung von 100 % Breite oder Höhe beizubehalten, müssen wir die Größe des Bildes in a einschränken bestimmte Art und Weise. Wenn wir für ein Bild nur eine Dimension (Breite oder Höhe) definieren, bleibt das Seitenverhältnis automatisch erhalten.

Wenn wir jedoch sowohl die Breite als auch die Höhe auf 100 % setzen, kann das Bild für uns zu groß werden vorgesehener Raum. In diesem Fall können wir das Bild in einem DIV mit einer maximalen Breite oder Höhe platzieren, die unseren Anforderungen entspricht. Anschließend können wir die Eigenschaft „overflow:hidden“ verwenden, um jeden Teil des Bildes zuzuschneiden, der über die angegebenen Abmessungen hinausgeht.

Alternativ können wir die Eigenschaften „max-width“ und „max-height“ verwenden, um die maximale Größe des Bildes zu steuern Bild. Indem wir diese Werte festlegen, ohne Mindestabmessungen festzulegen, stellen wir sicher, dass das Bild nicht verzerrt wird und die angegebenen Maximalabmessungen nicht überschreitet.