简单的CSS网格具有不等的图像大小 [英] simple CSS grid with unequal image sizes
问题描述
我想以网格格式布局图像列表。
I want to layout a list of images in a grid format.
他们的行为应该是这样：
They shall behave like this:
- 延伸到屏幕宽度的50％，如果在平板电脑屏幕上显示则为
- 在大型桌面屏幕上查看
我有一些非常接近的问题，但问题是图像大小不同，因此布局破碎。
I have something very close, but the problem is, the images have different sizes, and therefore the layout is broken. How should I fix the code so that the smaller image will be stretched bigger to match the bigger boxes automatically?
请看这里的问题： 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 /
推荐答案
这是一个简单的修复方法。
Its a simple fix.
http://jsfiddle.net/Gep2G/4/embedded/result/
img{width:100%; hieght:352px;}
只要您指定一个维度：浏览器将自动填充图片在正确的比例。继续为每个媒体查询设置所需的高度。
As long as you specify only one dimension: the browser will auto fill the image in the correct proportion. Continue to set the height as desired for each media query.
此外，您的CSS中有一些错误。例如，id只应该应用于单个元素。为多个元素（如您的包装元素）使用类。
Additionally there were a few errors in your css. For example an id should only be applied to a single element. Use classes for multiple elements ( like your wrapper element).
这篇关于简单的CSS网格具有不等的图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
