在这里，我使用砌体图像网格制作了响应式图像网格。我有保持图像相同宽高比的问题。我很欣赏任何一种建议。我 工作演示：Fiddle
<div class="toplist-container">
<div class="grid">
<div class="grid-sizer"></div>
<!-- <div class="grid-item"></div>-->
<div class="grid-item grid-item--width2 grid-item--height4">
<div class="transparent">
<span class="toplist-title">Top Content</span><img
src="http://freeimages.imagestocks.in/best-pictures/vintage-tumblr-photography/tumblr_mhmyc4p0zD1qgl14po1_500.jpg" class="image">
</div>
</div>
<div class="grid-item grid-item--height2 grid-item--width2">
<div class="transparent">
<span class="toplist-title">Sweden Top 10</span><img
src="https://lh3.googleusercontent.com/-Oa2z9ZFDAS8/VgFilUCLMgI/AAAAAAAAAlg/Y50I4u5kGjc/s0-d/32203-Vintage-Tree-Flowers_zps727b7dac.png" alt="list2"
class="image" />
</div>
</div>
<div class="grid-item grid-item--height2 grid-item--width1"></div>
<div class="grid-item grid-item--height2 grid-item--width1">
<div class="transparent">
<span class="toplist-title">USA Top 10</span><img
src="http://img06.deviantart.net/bcb6/i/2013/150/c/c/eiffel_vintage_by_santidesigns-d677kni.jpg" alt="list3"
class="image" />
</div>
</div>
<div class="grid-item grid-item--height grid-item--width1">
<div class="transparent">
<span class="toplist-title">Most Viewed</span><img
src="http://s9.favim.com/orig/130809/beautiful-nice-photography-pink-Favim.com-841516.jpg" alt="list3"
class="image" />
</div>
</div>
<div class="grid-item grid-item--height grid-item--width1">
<div class="transparent">
<span class="toplist-title">Top Tags</span><img
src="http://40.media.tumblr.com/tumblr_m91u8uVtaO1ry25g5o1_500.jpg" alt="toplist6" class="image">
</div>
</div>
<div
class="grid-item--width2 grid-item--height4 pull-right grid-img">
<div class="transparent">
<span class="toplist-title">New Releases</span><img
src="https://40.media.tumblr.com/560074e3f641d882609755021c086cdd/tumblr_ng2hrolqZA1rtrl9eo1_500.jpg" alt="list3" class="image" />
</div>
</div>
<div class="grid-item grid-item--width2">
<div class="relative">
<span class="toplist-title">Top Users</span>
</div>
<div class="user-container">
<div class="img-container">
<img class="pic" alt="Sana Mistry" src="assets/img/person.png"
height="50" width="50">
<div class="user-name">Sana Mistry</div>
<div class="followers">8901 followers</div>
</div>
<div class="img-container">
<img class="pic" alt="Ketty Pery" src="assets/img/person.png"
height="50" width="50">
<div class="user-name">Ketty Pery</div>
<div class="followers">8909 followers</div>
</div>
<div class="img-container">
<img class="pic" alt="Chrlie Shaha"
src="assets/img/person.png" height="50" width="50">
<div class="user-name">Charlie Shah</div>
<div class="followers">8901 followers</div>
</div>
<div class="img-container">
<img class="pic" alt="Kim K" src="assets/img/person.png"
height="50" width="50">
<div class="user-name">Kim K</div>
<div class="followers">1223 followers</div>
</div>
</div>
</div>
<div class="grid-item grid-item--width1">
<div class="transparent">
<span class="toplist-title">Global Top 10</span><img
src="http://41.media.tumblr.com/f14e437cd69f1072a4c2912e18476ed7/tumblr_n22sodHfGq1tv6mtqo1_500.jpg" alt="list3" class="image" />
</div>
</div>
<div class="grid-item grid-item--width1"></div>
</div>
</div>
</div>
如果有人了解其他可以解决宽高比问题的图像网格插件。
答案 0 :(得分：0)
试试这个
img{
display:block;
height:auto;
width:100%;
}