html - 响应式网页 - 随着外部 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和设置为 100%。width

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

请参阅此处的编辑。

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

Answer 3

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

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

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

我将您的 li 样式更新为：

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

不知道你为什么将你的 li 边距设置为，margin: 10px 0 0 5%;但我一直这样。我更新了显示和宽度。如果您需要正确的列齐平，请尝试添加

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

希望有帮助。