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

Question

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

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

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

还有一点需要注意，图像之间的宽度会有所不同，因此我不能只在子元素上使用硬编码偏移量的绝对定位。

这可能吗？

更新:

为了后代，我刚刚发现这可以通过使用

在旧版本的移动 safari 上完成

-webkit-background-size:auto 100px; 

当然，背景将像往常一样使用 50% 用于左侧定位。如果您需要它在其他浏览器上工作，公认的解决方案可能是最好的，但由于这个问题与 iphone 相关，所以这个解决方案更简洁一些。

Answer 1

您对额外加价的反对程度如何？另外，图片有最大尺寸吗？例如，如果您的最大图像宽度为 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;
}

这里有一个 fiddle 示例:http://jsfiddle.net/brettwp/bW4xD/