响应式网页 - 在外部div大小更改时调整图像大小？

Question

我正在设计一个页面，上面会有一些小图片。我希望它们在两列中随着窗口的变化而增长/缩小。

看看我的jsFiddle：

你会注意到，当您调整窗口大小时，图片会移动，这样当窗口很小时，只有一列，如果窗口非常宽，则有很多。而不是这种行为，我想调整图像的大小，以便总有两列。

我认为将宽度设置为45％是一个简单的例子......显然不是。

来自小提琴的代码：

<div id="Thumbs">
<ul>
    <li>
        <img src="http://goo.gl/LXa6K">
    </li>
    <li>
        <img src="http://goo.gl/LXa6K">
    </li>
    <li>
        <img src="http://goo.gl/LXa6K">
    </li>
    <li>
        <img src="http://goo.gl/LXa6K">
    </li>
    <li>
        <img src="http://goo.gl/LXa6K">
    </li>
    <li>
        <img src="http://goo.gl/LXa6K">
    </li>
</ul>

-

#Thumbs ul {
list-style: none;
}
#Thumbs ul li {
float:left;
margin: 10px 0 0 5%;
}
#Thumbs ul li img {
/*
How do you resize the images?
*/
}

Answer 1

我认为将其大小设置为100％的父级应该可以工作：

#Thumbs ul li img {
    width: 100%;
    height: 100%;
}

<强>未测试！

Answer 2

将CSS中的height和width设置为100％。

#Thumbs ul li img {
    height: 100%;
    width: 100%;
}

请参阅编辑here。

你可以看到这些屏幕截图的变化：

Answer 3

http://jsfiddle.net/johnkoht/jHm8w/3/

将图像宽度设置为100％是一个好的开始

#thumb ul li img {
  width: 100%;
}

我将你的李样式更新为：

#Thumbs ul li {
  display: inline-block;
  margin: 10px 0 0 5%;
  width: 44.6%;
}

不确定为什么将李缘设置为margin: 10px 0 0 5%;，但我保持这种方式。我更新了显示和宽度。如果您需要右列齐右，请尝试添加

#thumbs ul li:nth-child(2n+2) {
  float: right;
}

希望有所帮助。