Wie kann ich die Größe von Bildern am besten ändern, wenn PNGs nicht alle die gleiche Größe haben?

Question

Ich mache ein Layout für eine Gruppe von Text und Bildern mit Foundation. Ich habe PNGs aus Photoshop exportiert. Optisch in Photoshop sieht das Bild so aus, als wären sie in quadratischen Kästchen in einem Layout von div s enthalten. Wenn ich sie jedoch in dieses Layout einfüge, erscheint eines der Bilder optisch größer als die anderen. Speichert Photoshop diese Bilder in ihrer Originalgröße und nicht so, wie der Designer sie im Layout verändert hat? Was ist die beste Vorgehensweise, um die Bilder auf der Seite optisch gleich groß aussehen zu lassen?

Muss ich das Bild erneut vergrößern und speichern, indem ich es versuche und wiederhole, bis es im Layout richtig aussieht? Ich habe ungefähr vier Bilder. Soll ich ihnen alle eine eigene Klasse geben und ihnen eine eindeutige Breite zuweisen, damit sie korrekt auf dem Bildschirm erscheinen? Macht das die Bilder manchmal unscharf? Ich bin mir nicht sicher, ob ich darauf stoße, wenn ich sie in Photoshop re-size/re-save. Lass es mich wissen, wenn diese Frage besser für graphicdesign.stackexchange geeignet ist. Es Art von spreizt die beiden Standorte meiner Meinung nach

Struktur:

div class="media-object" 
    div class="media-object-section middle 
    img 

div class="media-object" 
    div class="media-object-section middle 
    img 

div class="media-object" 
    div class="media-object-section middle 
    img 

div class="media-object" 
    div class="media-object-section middle 
    img 

Answer 1

Darf ich vorschlagen, Sie verwenden background-image und background-size: cover. Dadurch wird sichergestellt, dass das Bild unabhängig von der Breite oder Höhe des Bildes immer die div enthält, die alle in derselben visuellen Größe wiedergegeben werden, wobei das Seitenverhältnis beibehalten wird.

Dies kann mit dem img Element auch getan werden, obwohl als Browser-Unterstützung ist weniger gut, entschied ich mich nicht zu.

html, body { 
 
    margin: 0; 
 
    width: 100vw; 
 
} 
 
.media-object { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.media-object-section { 
 
    width: calc(25vw - 4px);  /* 4px equal margin on each side */ 
 
    height: calc(25vw - 4px); 
 
    margin: 2px; 
 
    background-size: cover; 
 
    background-position: center; 
 
} 
 

 
.media-object-section.img1 { 
 
    background-image: url('http://lorempixel.com/200/200/animals/1'); 
 
} 
 
.media-object-section.img2 { 
 
    background-image: url('http://lorempixel.com/300/200/animals/2'); 
 
} 
 
.media-object-section.img3 { 
 
    background-image: url('http://lorempixel.com/200/300/animals/3'); 
 
} 
 
.media-object-section.img4 { 
 
    background-image: url('http://lorempixel.com/400/400/animals/4'); 
 
}

<div class="media-object"> 
 
    <div class="media-object-section middle img1"> 
 
    </div> 
 
    <div class="media-object-section middle img2"> 
 
    </div> 
 
    <div class="media-object-section middle img3"> 
 
    </div> 
 
    <div class="media-object-section middle img4"> 
 
    </div> 
 
    <div class="media-object-section middle img2"> 
 
    </div> 
 
    <div class="media-object-section middle img3"> 
 
    </div> 
 
    <div class="media-object-section middle img4"> 
 
    </div> 
 
    <div class="media-object-section middle img1"> 
 
    </div> 
 
</div>

aktualisieren basierend auf Kommentar

Hier ist eine keine flex Lösung

html, body { 
 
    margin: 0; 
 
    width: 100vw; 
 
} 
 
.media-object-section { 
 
    display: inline-block; 
 
    width: calc(25vw - 4px);  /* 4px margin on eachside */ 
 
    height: calc(25vw - 4px); 
 
    margin: 2px -2px -2px 2px; /* -2px to compensate for white-space */ 
 
    background-size: cover; 
 
    background-position: center; 
 
} 
 

 
.media-object-section.img1 { 
 
    background-image: url('http://lorempixel.com/200/200/animals/1'); 
 
} 
 
.media-object-section.img2 { 
 
    background-image: url('http://lorempixel.com/300/200/animals/2'); 
 
} 
 
.media-object-section.img3 { 
 
    background-image: url('http://lorempixel.com/200/300/animals/3'); 
 
} 
 
.media-object-section.img4 { 
 
    background-image: url('http://lorempixel.com/400/400/animals/4'); 
 
}

<div class="media-object"> 
 
    <div class="media-object-section middle img1"> 
 
    </div> 
 
    <div class="media-object-section middle img2"> 
 
    </div> 
 
    <div class="media-object-section middle img3"> 
 
    </div> 
 
    <div class="media-object-section middle img4"> 
 
    </div> 
 
    <div class="media-object-section middle img2"> 
 
    </div> 
 
    <div class="media-object-section middle img3"> 
 
    </div> 
 
    <div class="media-object-section middle img4"> 
 
    </div> 
 
    <div class="media-object-section middle img1"> 
 
    </div> 
 
</div>

Hinweis: Der -2px zum Ausgleich von Leerraum kann auf andere Weise gelöst werden. Überprüfen Sie this post für weitere Informationen