Question

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

感谢。

Answer 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%);
}

值得注意的是，IE9及更新版本支持CSS transform。

Answer 2

试试这个：

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

它会将背景置于元素中间，使其均匀缩小

在可变宽度的网站上均匀隐藏图像

2 个答案: