CSS erzwingt Bildgrößenänderung und behält Seitenverhältnis bei

Question

Ich arbeite mit Bildern und bin auf ein Problem mit den Seitenverhältnissen gestoßen.

<img src="big_image.jpg" width="900" height="600" alt="" />

Wie Sie sehen können, height y width sind bereits festgelegt. Ich habe eine CSS-Regel für Bilder hinzugefügt:

img {
  max-width: 500px;
}

Aber für big_image.jpg erhalte ich width=500 y height=600 . Wie kann ich Bilder so einstellen, dass ihre Größe verändert wird, ohne ihr Seitenverhältnis zu verändern?

Answer 1

https://jsfiddle.net/sot2qgj6/3/

Hier ist die Antwort, wenn Sie das Bild mit fester Prozentsatz der Breite aber keine festen Pixel der Breite .

Und das wird nützlich sein, wenn es um verschiedene Bildschirmgrößen .

Die Tricks sind

1. Verwendung von padding-top um die Höhe aus der Breite zu bestimmen.
2. Verwendung von position: absolute um das Bild in den Füllbereich zu setzen.
3. Verwendung von max-height and max-width um sicherzustellen, dass das Bild nicht über das übergeordnete Element hinausgeht.
4. mit display:block and margin: auto um das Bild zu zentrieren.

Ich habe auch die meisten Tricks in der Fiedel kommentiert.

---

Ich habe auch einige andere Möglichkeiten gefunden, dies zu erreichen. Es wird kein echtes Bild in html geben, daher bevorzuge ich persönlich die obere Antwort, wenn ich ein "img"-Element in html brauche.

einfaches css durch Verwendung von Hintergrund http://jsfiddle.net/4660s79h/2/

Hintergrundbild mit Wort im Vordergrund http://jsfiddle.net/4660s79h/1/

das Konzept zur Verwendung der absoluten Position stammt von hier http://www.w3schools.com/howto/howto_css_aspect_ratio.asp

Answer 2

Sie können dies verwenden:

img { 
    width: 500px; 
    height: 600px; 
    object-fit: contain; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

Answer 3

Sie können ein Div wie folgt erstellen:

<div class="image" style="background-image:url('/to/your/image')"></div>

Und verwenden Sie dieses css, um es zu gestalten:

height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain; // this can also be cover

Answer 4

Sie können den Container auf display: flex y align-items: center (andere align-items Werte funktionieren auch). Anstelle von align-items können Sie auch align-self auf dem Bild selbst.

Answer 5

Können Sie aspect-ratio Eigenschaft css

.my-image {
 aspect-ratio: 1/1; // square
 aspect-ratio: 16/9; // wide screen 1080p
 aspect-ratio: 4/3;
 aspect-ratio: 2/3;
}