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

【问题标题】：Hide image evenly on both sides on variable width site在可变宽度站点的两侧均匀隐藏图像
【发布时间】：2014-10-06 05:56:33
【问题描述】：

我正在用 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 中做些什么？

谢谢。

【问题讨论】：

在 CSS 中使用百分比。
在网站缩小时隐藏图像位的百分比，而不是缩放图像？请问有例子吗？
图片在#main容器内应该如何对齐？它应该水平显示在中心吗？还是在旁边？
我会使用 @import 'url.css' (min-width:500px); 或 <link rel='stylesheet' type='text/css' media='(min-width:500px)' href='url.css' /> 或类似的东西，所以如果您只是测试浏览器大小，那么您的 CSS 是预定义的。如果你想在调整浏览器大小时使用它，你必须使用 JavaScript onresize 事件。
@HashemQolami 水平居中。

标签： javascript html css

【解决方案1】：

如果使用CSS transforms 是一个选项，您可以通过left: 50% 定位图像，然后使用负值translateX 使其居中。

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

Example Here

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

.img-container { overflow: hidden; }

img {
  vertical-align: middle; /* remove the vertical gap under inline level elements */

  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}

值得注意的是，CSS transform 在 IE9 及更高版本中受支持。

【讨论】：

需要在图像上设置最小宽度，使其停止收缩并开始溢出。

【解决方案2】：

试试这个：

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

它将背景居中在元素的中间，使其均匀变窄

【讨论】：

src 是前景而不是 background，这不会控制图像的大小。
我可以将图像设置为背景，但我更希望它是内容而不是背景图像属性，另外在其他一些页面上，我会让它在不同的图像之间循环，我会怀疑我能否使用 jQuery 和背景图片轻松做到这一点？