如何在DIV的水平中心设置图像以填充页面宽度？答案

【问题标题】：How to set image in horizontal center of DIV to fill page width?如何在DIV的水平中心设置图像以填充页面宽度？
【发布时间】：2014-02-20 01:13:09
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案1】：

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

img {
    max-width: 100%;
}

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

【讨论】：

【解决方案2】：

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

CSS：

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

【讨论】：

【解决方案3】：

你可以试试这个：JSFiddle

img 将是一个相对定位的元素，所以你可以使用 left: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; }

【讨论】：