1

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

4 回答 4

3

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

#menu img {
    width: 20%;
}

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

于 2013-05-02T03:41:18.963 回答
0

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

你可以试试这个而不是当前的 CSS。

#menu img {
    width: 31.33%;
}

希望这可以帮助你。

于 2013-05-02T04:50:14.727 回答
0

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

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

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

于 2013-05-02T05:27:12.280 回答
0

尝试使用百分比宽度来根据浏览器宽度设置图像大小。在根据窗口调整大小调整元素大小时,始终最好以百分比(而不是像素)设置宽度。

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

希望这能解决你的问题:)

于 2013-05-02T06:36:46.160 回答