当窗口水平调整大小时,如何缩小图像宽度(保持居中)?

时间:2013-03-28 04:01:43

标签: css html5 css3 resize

我想知道在水平调整页面大小时如何缩小图像。我试图隐藏HEADERLINE div的溢出,但它只是隐藏了整个事情。

到目前为止,这是我的代码:http://jsfiddle.net/5W2C2/4/

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 {
    height: 1px;
    width: 980px;
    margin: -10px auto 20px auto;
}

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

1 个答案:

答案 0 :(得分:1)

所以我重新添加了overflow: hidden,制作了width: 100%并删除了指定的高度。这是你的目标吗?

演示: http://jsfiddle.net/Marcel/5W2C2/5/