我目前有一个图像网格,根据窗口和容器的大小进行适当缩放。
http://jsfiddle.net/AndyMP/2zND2/13/
到目前为止,我试图在不破坏现有结构的情况下将DIV包裹在图像周围,但失败了。我该怎么做?
CSS
#photos {
/* Prevent vertical gaps */
line-height: 0;
width: 100%;
}
#photos img {
/* Just in case there are inline attributes */
width: 20%;
height: auto;
float:left;
overflow:hidden;
}
@media (min-width:1200px) {
#photos img {
/* 5 images wide */
width: 19.2% ; margin: 0 1% 1% 0;
}
#photos img:nth-child(5n) { margin: 0 0 1% 0; }
}
@media (min-width:800px) and (max-width: 1200px) {
#photos img {
/* 5 images wide */
width: 19.2% ; margin: 0 1% 1% 0;
}
#photos img:nth-child(5n) { margin: 0 0 1% 0; }
}
@media (min-width:400px) and (max-width: 800px) {
#photos img {
/* 4 images wide */
width: 24.25% ; margin: 0 1% 1% 0;
}
#photos img:nth-child(4n) { margin: 0 0 1% 0; }
}
@media (min-width:300px) and (max-width: 400px) {
#photos img {
/* 2 images wide */
width: 49% ; margin: 0 2% 2% 0;
}
#photos img:nth-child(2n) { margin: 0 0 2% 0; }
}
@media (max-width: 300px) {
#photos img {
/* 1 image wide */
width: 100% ; margin: 0 0 2% 0;
}
}
首先,在应用我将要提到的步骤后,您应该得到的最终结果是:小链接。
1)将每个img
包裹在一个div
中。
2)添加CSS规则:
#photos div {
display: inline-block;
}
3)将所有选择器#photos img
更改为#photos div
。
4)添加:
#photos div img {
width: 100%;
}