Javascript 在可变宽度站点的两侧均匀隐藏图像

我正在用MVC5编写一个HTML5站点，它的宽度是可变的，在它的最大宽度处，有一个完整的图像显示在一个div中。随着站点的缩小，当前它会从图像的右侧删除内容，但我希望它从两侧均匀地删除内容

站点的外部包装div被定义为保持站点居中，样式如下：

#wrapper {
    min-width: 1152px;
    max-width: 1680px;
    margin: 0 auto;
    position: relative;
}

包含图像的div具有以下样式：

#main {
    position: relative;
    overflow: hidden;
}

目前，我刚刚在主div中的

img

标记中获得了图像，如下所示：

<img src="@Url.Content("~/Content/Images/Home/home.jpg")"/>

如何使图像在站点缩小时两侧均匀缩小，反之，当图像再次扩大到最大值时，如何使图像在两侧均匀显示？在CSS中有没有一种方法，或者我需要在Javascript中做些什么

谢谢。

试试这个：

<img src="@Url.Content("~/Content/Images/Home/home.jpg")" style="background-position: center;"/>

它将在元素的中间设置背景，使其均匀缩小

如果使用是选项，则可以通过“代码>左：50% < /代码>对图像进行定位，然后使用否定<代码> TrxBase<代码>使其居中。

这样，它将在两侧均匀显示/隐藏图像：

<div class="img-container">
    <img src="http://placehold.it/500x350" alt="">
</div>

---

值得注意的是，IE9及更高版本中支持这一点。

在CSS中使用百分比。百分比可以在站点缩小时隐藏图像位，而不是缩放图像？请举个例子好吗？图像应该如何在

#main

容器中对齐？它应该水平显示在中心吗？或者在一边？我会使用

@import'url.css'（最小宽度：500px）

或

或类似的东西，所以如果您只是测试浏览器大小，您的CSS是预定义的。如果要在调整浏览器大小时使用它，必须使用JavaScript

onresize

事件。@HashemQolami水平居中。

src

是前台而不是

background

，这不会控制图像的大小。我可以将图像设为背景，但我更希望它是内容而不是背景图像属性，另外，在其他一些页面上，我会让它在不同的图像之间循环，我怀疑我是否能够轻松地使用jQuery和背景图像来实现这一点？需要在图像上设置最小宽度，以便它停止收缩并开始溢出。