Question

我想以网格格式布局图像列表。

他们的行为应该是这样的：

如果在小屏幕上观看，则拉伸至屏幕宽度的100％
如果在平板电脑屏幕上观看，则拉伸至屏幕宽度的50％
如果在大型桌面屏幕上观看，则拉伸到屏幕宽度的25％

我有一些非常接近的东西，但问题是，图像有不同的大小，因此布局被打破。我应该如何修复代码，以便将较小的图像拉伸得更大以自动匹配更大的框？

请在此处查看问题：http://jsfiddle.net/Gep2G/embedded/result/

我的HTML源代码：

<body>
    <div id='wrapper'><img src='http://placekitten.com/352/288'/></div>
    <div id='wrapper'><img src='http://placekitten.com/352/288'/></div>
    <div id='wrapper'><img src='http://placekitten.com/352/288'/></div>
    <div id='wrapper'><img src='http://placekitten.com/320/240'/></div>
    <div id='wrapper'><img src='http://placekitten.com/320/240'/></div>
</body>

我的CSS：

body {margin:0;padding:0}
img{width:100%;height:100%;}
#wrapper{width:100%;float: left;}   

@media (min-width:320px) {
    /* smartphones, iPhone, portrait 480x320 phones */ 
    body {margin:0;padding:0}
    img{width:100%;height:100%;}
    #wrapper{width:100%;float: left;}   
}
@media (min-width:961px) { 
    /* tablet, landscape iPad, lo-res laptops ands desktops */ 
    body {margin:0;padding:0}
    img{width:100%;height:100%;}
    #wrapper{width:50%;float: left;}    
}
@media (min-width:1025px) { 
    /* big landscape tablets, laptops, and desktops */ 
    body {margin:0;padding:0}
    img{width:100%;height:100%;}
    #wrapper{width:50%;float: left;}    
}
@media (min-width:1281px) { 
    /* hi-res laptops and desktops */ 
    body {margin:0;padding:0}
    img{width:100%;height:100%;}
    #wrapper{width:25%;float: left;}    
}

可编辑的代码： http://jsfiddle.net/Gep2G/

Answer 1

我之前制作了一个脚本来解决这个问题：

http://jsfiddle.net/prollygeek/QD9kZ/

side1=0,side2=0

$(".flexbox").children().each(function(index, element) {
    if (index % 2 === 0) //odd children (starts with 0 )
    {
$(this).css("top",side1+"px") 
side1+=parseInt($(this).css("height"))
    }
else //even children
    {
$(this).css("top",side2+"px")
$(this).css("left","50%") 
side2+=parseInt($(this).css("height"))
    }   
});

但是如果你想要纯css解决方案我建议检查： http://designshack.net/articles/css/masonry/ 纯粹的CSS解决方案。

Answer 2

@media (min-width: 1281px){
#wrapper {
width: 25%;
float: left;
height: 20em;
}
}

Answer 3

这是一个简单的解决方案。

http://jsfiddle.net/Gep2G/4/embedded/result/

img{width:100%; hieght:352px;}

只要您指定一个维度：浏览器将以正确的比例自动填充图像。继续为每个媒体查询设置所需的高度。

此外，您的CSS中也有一些错误。例如，id应仅应用于单个元素。使用多个元素的类（如包装元素）。

具有不相等图像大小的简单CSS网格

3 个答案: