Question

我需要居中的图像比包含它们的父div更宽。父div是固定宽度，溢出设置为隐藏。

<div style='overflow:hidden; width:75px height:100px;'>
    <img src='image.jpg' style='height:100px;' />
</div>

我必须使用图像作为子元素，因为我需要调整缩略图尺寸并且不能依赖背景尺寸，因为旧版本的移动版Safari不支持这是必需的。我也不能使用javascript，所以它必须是一个CSS解决方案。

还有一点需要注意的是，宽度会因图像而异，所以我不能仅仅在硬编码偏移处对子元素使用绝对定位。

这可能吗？

更新：

对于后代，我刚刚发现这可以通过使用

在旧版本的移动版游戏中完成

-webkit-background-size:auto 100px;

当然，背景将照常设置，使用50％进行左侧定位。如果你需要这个在另一个浏览器上工作，接受的解决方案可能是最好的，但由于这个问题与iphone有关，这个解决方案有点清洁。

Answer 1

不使用背景图片仍然有用吗？你不应该调整它的大小。这样的事情有意义吗？ http://jsfiddle.net/QHRHP/44/

.container{
 margin:0 auto;
 width:400px;
 border:2px solid #000;  
 height:250px;
 background:url(http://placekitten.com/800/250) center top no-repeat;
}

Answer 2

你对额外加价有多大不利？此外，图像的最大尺寸是多少？例如，如果您的最大图像宽度是225像素，那么您可以尝试：

<div class="frame">
  <div>
    <img src="image.jpg"/>
  </div>
</div>

.frame {
  overflow: hidden; 
  width: 75px;
  height: 100px;
  position: relative;
}
.frame > div {
  position: absolute;
  left: -5075px;
  width: 10225px;
  text-align: center;
}
.frame img {
  height: 100px;
  display: inline-block;
}

这里有一个小提琴示例：http://jsfiddle.net/brettwp/bW4xD/

Answer 3

如果你知道div的宽度和图像的宽度，你可以简单地做一些数学运算。

假设div的宽度为200px，图像宽度为300px：

div.whatever {
    width: 200px;
}
img.someImg {
    left: -50px;
    position: relative;
}

我们知道，由于div的宽度是200个像素，因此将从图像中裁剪100个像素。如果要使图像居中，则会在任一侧的div边界之外隐藏50个像素。因此，我们将图像的左侧位置设置为-50px。

示例（了解图像大小）：http://jsfiddle.net/7YJCD/4/

这有意义吗？

如果您不知道图像大小或div大小，可以使用javascript来检测这些值并执行相同的操作。

示例（不知道图像大小，使用jQuery javascript）：http://jsfiddle.net/K2Rkg/1/

仅供参考，这是original image。

如何在较窄的父div中水平居中img

3 个答案: