窗口调整大小后调整图像大小？

Question

目前我有四张图片并排。当窗口调整大小或在较小的设备上查看时，它会进行线跳（三个图像和下面的第四个图像）。然而我想要的是所有四个图像相对于窗口大小缩小。为了说清楚，我已经包含了一些图像和我的代码。这里也是jsfiddle：http://jsfiddle.net/hxeJb/

^这就是我现在拥有的。

^这就是我想要实现的目标。

HTML：

<div id="headerline">
<img src="http://s21.postimg.org/l6t6akypj/line.jpg"/>
</div>

<div id="menu">
<img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png">
<img class ="music" src="http://s18.postimg.org/4st2fxgqh/image.png">
<img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png">
<img class ="bio" src="http://s18.postimg.org/5xn4lb37d/image.png">
    </div>

CSS：

#headerline {
    width: 100%;
    overflow: hidden;
    margin: -10px auto 20px auto;
}

#menu {
    max-width: 700px;
    text-align: center;
    margin: auto;
}
#menu img {
    width: 150px;
}

Answer 1

http://jsfiddle.net/hxeJb/2/

#menu img {
    width: 20%;
}

看看这是否有帮助，只是不提供固定宽度，让图像宽度相对于其父宽度

Answer 2

在jsFiddle中观察CSS部分，我认为以百分比而非固定像素分配宽度将解决您的问题。

您可以尝试使用此代替当前的CSS。

#menu img {
    width: 31.33%;
}

希望这可能会对你有所帮助。

Answer 3

其他答案可能都是正确的，但您可能需要添加max-width: 150px;，以便hte图像不会扩展太大而质量下降。

#menu img {
    width: 30%;
    max-width: 150px;
}

小提琴：http://jsfiddle.net/hxeJb/4/

Answer 4

尝试使用宽度百分比来根据浏览器宽度设置图像大小。在根据窗口重新调整大小重新调整元素大小时，最好以百分比（而不是像素）设置宽度。

#menu img {
    width: 25%; //give the width as per the requirement
}

希望这能解决您的问题：）