0

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

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

这是我的 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 标签居中所需的量？

提前谢谢了。

4

3 回答 3

1

如果您能给我们举个例子，那就太好了，但让我们试试。:)

我的建议是将图像设置为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.Read more about that here

于 2015-10-01T19:27:39.280 回答
0

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

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

或者

img {
    width: 50%
    left: 50%
}
于 2015-10-01T19:20:44.417 回答
0

如果 IMG 单独在其行上，您可以使用 text-align 和负边距。

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

于 2015-10-01T19:31:36.090 回答