當png的大小不一樣時，如何最好地調整圖像大小？

Question

我正在使用Foundation爲一組文本和圖像進行佈局。我從photoshop導出了png。在photoshop中可見，圖像看起來好像將它們很好地包含在div s的佈局中的方框中。但是，當我把它們放在佈局中時，其中一個圖像比其他圖像看起來更大。 Photoshop是否將這些圖像保存爲原始大小，而不是設計師將其調整到佈局上的大小？讓圖片在頁面上看起來大小相同的最佳做法是什麼？

我是否重新調整大小並重新保存圖像並嘗試重複，直到它在佈局中看起來正確爲止？我有大約四個圖像。我應該給他們一個單獨的課程，並指定一個獨特的寬度，以便他們在屏幕上正確顯示？這樣做會使圖像有時顯得模糊？我不確定在Photoshop中重新調整尺寸/重新保存時是否會遇到此問題。請讓我知道這個問題是否更適合graphicdesign.stackexchange。它像是跨越兩個網站在我看來

結構：

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

我可以建議你使用background-image和background-size: cover。這將確保無論圖像是否更寬或更高，它將始終填充div，所有渲染都以相同的視覺尺寸進行渲染，並保持縱橫比。

這也可以用img元素來完成，雖然它的瀏覽器支持不太好，但我沒有選擇。基於評論

這裏

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>

更新是一個無解flex

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>

注意：用於補償空白的-2px可以通過其他方式解決。請檢查this post獲取更多信息