响应式居中超大图像 div

Question

过去几天我一直在研究这个问题，虽然找到了几个在静态布局中运行良好的解决方案，但我在响应式设计中遇到了一个问题。

我们在主页上使用了一系列横幅图片，并试图让它们在较小的移动屏幕上居中显示在文本后面的图片上。我可以解决固定宽度的问题，但我们需要让它响应。

这是我的 CSS 代码的当前版本：

#mainSlideshow .item img {
    display: block;
    width: auto !important;
    max-width: none !important;
    height: 350px !important; 
    overflow: hidden;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform:  translateX(-50%);
-ms-transform:  translateX(-50%);
-o-transform:  translateX(-50%);
transform:  translateX(-50%);
}
#mainSlideshow .item .carouselImgHold {position: relative; }

挑战似乎是向左移动 - 现在，图像只是向左移动 img 宽度的 50%（不足为奇）。我如何对 CSS 进行编程以使图像仅漂移使图像在嵌套 div 标签中居中所需的量？

非常感谢。

Answer 1

我认为你可以通过多种方式实现这一目标。

img {
    display: block;
    margin-left: auto;
    margin-right: auto
}

或者

img {
    width: 50%
    left: 50%
}

Answer 2

如果你能给我们举个例子就好了，但我们试试吧。 :)

我的建议是将图像设置为 background-image 而不是链接它。这样看起来像：

#mainSlideshow .item{
  background-image:url("path-to-image/image.jpg");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}

这样你就不会拉伸覆盖 #mainSlideshow .item 的图像。阅读更多相关信息 here

Answer 3

如果 IMG 独立在其行上，您可以使用文本对齐和负边距。

http://codepen.io/anon/pen/PPpYzM

.oversizedImage {
  text-align: center;
}

.oversizedImage img {
  margin: 0 -100%;
}
/* demo purpose */

.oversizedImage {
  width: 50%;
  margin: auto;
  border: solid;
  box-shadow: 0 0 150px 100px white;/* you should use overflow:hidden; here it only shows how much is outside :) */
}

.oversizedImage img {
  vertical-align: top;
  /* instead default baseline to avoid gap under */  
  position: relative;
  z-index: -1;
}

<div class="oversizedImage">
  <img src="http://lorempixel.com/1200/200"/>
</div>

这只是一个猜测，因为我们错过了你的 HTML

响应式居中超大图像 div

Centering oversized image in responsive div

css

responsive-images