wie ein Bildfenster Größe ändern, wenn der Container weniger als eine bestimmte Breite in css ist

Question

Ich habe ein Bild, das 1920 Pixel breit ist. Ich möchte, dass es im Browserfenster zentriert und beschnitten angezeigt wird, wenn die Breite mehr als 1024 Pixel beträgt. Wenn die Browserbreite weniger als 1024 beträgt, sollte das Bild zentriert und auf 1024 Pixel zugeschnitten und dann auf die Browserbreite angepasst werden.

Ich kann nicht herausfinden, wie dies zu tun ist, und habe noch keine Lösungen im Internet gefunden. Kann mir jemand sagen, wie man das macht, oder mich auf Beispiele verweisen?

Answer 1

Ich bin nicht ganz sicher, was Sie versuchen zu tun, aber ich denke, was Sie suchen, ist: max-width

http://www.w3schools.com/cssref/pr_dim_max-width.asp

Answer 2

Sie object-fit Eigenschaft verwenden:

.image-wrapper { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    > img { 
     width: 100%; 
     height: 100%; 
     object-fit: cover; 
     object-position: 50% 50%; 
    } 
} 

HTML

<div class="image-wrapper"> 
    <img src="" /> 
</div> 

Answer 3

Was Sie suchen, erreichen Sie mit Medienabfragen. Folgendes ist nur ein Beispiel. Hoffe, du kannst damit fortfahren.

@media screen and (min-width: 480px) { 
    body { 
     background-color: lightgreen; 
    } 
} 

Hier wird die Hintergrundfarbe geändert, wenn Sie die Größe des Browsers ändern und die Browserbreite weniger als 480 Pixel beträgt.