Question

我想使用jQuery和CSS创建一个全宽度滑块。我有3张不同宽度的图像请看下面的代码：

<div id="banner">
    <img src="image1.jpg" alt="" />
</div>

如何将图像放在容器DIV #banner的水平中心？我假设在大多数情况下，#banner最多为1400px。但是里面的图像可能超过这个尺寸。用户也可以使用不同的分辨率。所以我需要动态移动图像位置，使其在主div中居中。

版：
例如，假设#banner的宽度为1400px。如果里面的图像是1500px，我需要一些东西将图像移动到左侧50px。它可以在其中心显示图像。

Answer 1

你可以试试这个：JSFiddle

img将是一个相对positoned元素，所以你可以使用左：50％;并使用jaquery使用图像宽度的/ 2的负边距左对中。

这是jquery示例

$("#banners > img").each(function() {
var element = $(this); element.css({'margin-left': -(element.width()/2)});
});

这是css示例

#banners     { width:500px; background:#CCC; }
#banners img { display:block; position:relative; left:50%; border:1px solid #FFF; }

Answer 2

为什么不尝试调整图像大小以适合父div大小：

img {
    max-width: 100%;
}

这里我以400px宽度容器内的600px宽度图像为例。

Answer 3

如果我正确理解你的需要。一种可能的解决方案是通过边距使图像居中。无论#banner有多大，这都会使其居中。

CSS：

#banner img {
    display: block;
    margin: 0 auto;
}