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

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

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

如何将图像放置在容器分区的水平中心

#banner

？
我假设在大多数情况下，

#banner

最多为1400px。但里面的图像可能比这个尺寸还要大。用户也可以使用不同的分辨率。所以我需要动态移动图像位置，使其位于主div的中心

版本：

---

例如，假设横幅的宽度为1400px。若它里面的图像是1500px，我需要的东西，移动图像到它的左侧为50px。它可以在其中心显示图像。

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

img {
    max-width: 100%;
}

---

这里我使用400px宽度容器内的600px宽度图像作为示例

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

CSS:

您可以尝试以下方法：

img将是一个相对定位的元素，因此您可以使用左侧：50%；并使用jaquery使用图像宽度的1/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; }

---

#横幅{text align:center；}@MiheyEgoroff这不是我需要的。这将改变纵横比并影响图像高度。

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