Question

我对齐横幅时遇到问题它不能是背景图像，它可以是对象或嵌入，它必须是100％的页面，但它必须在页面宽度减小时保持可见横幅的中心部分。

Answer 1

我认为没有任何理由不使用背景图片。（如果你后悔这个限制，那么这里是一个工作小提琴）

如果你必须使用一个图像，你可以用一个简单的JQuery函数来看看上面的工作小提琴。

var img = $("#bannerWithScript > img"); //or any selector you want for targeting your image

img.css({
    "top": "calc(50% - " + (img.height() / 2) + "px)",
    "left": "calc(50% - " + (img.width() / 2) + "px)"
});

Answer 2

将width:100%添加到.promo_top img？

http://jsfiddle.net/3Ydph/

修改

如果您不喜欢调整图片大小，那么的快捷方式将是一个非常宽的背景图片：

.promo_top{ float:left; width:100%; height:300px; text-align:center; overflow:hidden; background-image:url(http://www.quoteserv.com/funny/images/bowie.gif); background-position:top center; background-repeat:no-repeat; }

如果屏幕对于横幅而言太小，则边缘将向左和向右消失，但保持集中。新的jsfiddle（想象一下这张照片非常宽，可与大多数屏幕相匹配）

http://jsfiddle.net/3Ydph/1/

Answer 3

<强> CSS

.width_100 {width: 100%;}
.center {margin-left: auto; margin-right: auto; text-align: center;}

<强> XHTML

<div class="width_100">
 <img alt="Alternative Text" class="center" src="lulz.png" />
</div>

将横幅与中心对齐

3 个答案: