Crop Bilder behalten Seitenverhältnis

Question

Ich habe eine Liste von Bildern mit Text umwickelt, aber Bilder, die ich erhalte, kommen in verschiedenen Größen (alle größer als 150px). Ich muss sie alle auf 150x100px zuschneiden, aber das korrekte Seitenverhältnis beibehalten. Könnte jemand bitte den besten Weg vorschlagen, dieses Problem zu lösen? Vielen Dank!

HTML:

<ul>   
    <div class="post" id="post"> 
    <div> 
     <li> 
     <img class="TextWrap" src="{{ picture }}"> 
     <a href="{{ link }}">{{ message }}</a><p> 
     {{ time }} 
     </li> 
    </div> 
</ul> 

CSS:

.post { 
    width: 500px; 
    margin-top: 15px; 
    float: left; 
} 

.post img { 
    width: 150px; 
    height: 100px; 
    margin-bottom: 15px; 
    margin-right: 20px; 
} 

.TextWrap { 
    float: left; 
} 

Answer 1

Solange Sie keine Server-Seite beschneiden möchten, können Sie folgende CSS-add:

.post img { 
    object-fit: cover; 
} 

Bitte mehr möglich Werte für object-fit

Answer 2

Als Alternative zu Rays Antwort, können Sie die Bilder als Hintergründe und die Verwendung einstellen:

background-size: cover; 

Answer 3

Die beste Antwort (im Gegensatz zu beschneiden) zu skalieren ist Javascript einen serverseitigen Prozess fahren und dann die Breite einstellen und Höhe im HTML/CSS programmatisch. Wenn Sie unterschiedliche Höhen und Breiten haben, muss die neu skalierte Breite relativ zur Höhe berechnet werden, oder umgekehrt, und manchmal beides, und CSS bietet keinen Mechanismus dafür.

Die Mathematik ist ziemlich einfach. Passend zu einem 150 horizontalen Anforderung:

• newImageY = 150/incomingImageX * incomingImageY
• newimageX = 150

passen auf eine 100 vertikale Anforderung:

• newImageX = 100/incomingImageY * incomingImageX
• newimageY = 100

Wenn die skalierte Achse zu groß für verbleibende Restriktionen ist, skalieren Sie das gesamte Bild (X und Y) um den erforderlichen Betrag.

Beim Zuschneiden (im Gegensatz zur Skalierung) treten mehrere Probleme auf, über die Sie entscheiden müssen. Im Idealfall würden Sie (oder der Übergeber) entscheiden, welchen Teil des Bildes Sie anzeigen möchten, und dann intelligent zuschneiden. Es geht also sowohl um aktiven Code als auch um eine zugehörige Benutzeroberfläche.

Zum Beispiel kann es Fälle geben, in denen Bilder horizontal nicht gefüllt werden, sondern vertikal; Fälle, bei denen es nicht vertikal gefüllt wird, wenn es horizontal auf 150 skaliert wird.

Die Quintessenz ist ziemlich "Sie müssen das Bild untersuchen und verarbeiten", wenn Sie das gut machen wollen. CSS macht hier einfach keinen guten Job.

Answer 4

Wenn keine Höhe und Breite angegeben sind, oder nur eine davon, wird das Bild die erwartete Ration erhalten.

max-width und max-height können immer noch die der Größe

.post { 
    width: 500px; 
    margin-top: 15px; 
    float: left; 
} 

.post img { 
    max-width: 150px; 
    max-height: 100px; 
    margin-bottom: 15px; 
    margin-right: 20px; 
} 

.TextWrap { 
    float: left; 
}