目前我有四个并排的图像。当窗口被调整大小或在较小的设备上查看时,它会跳线(三个图像,第四个在它下面)。但是我想要的是所有四个图像都相对于窗口大小缩小。为了清楚起见,我已经包含了一些图像和我的代码。这里也是 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;
}