如何在较窄的父级div中水平居中一张图片

Question

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

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

我必须使用图像作为子元素，因为我需要调整缩略图的尺寸，并且不能依赖于background-size，因为它不受移动版Safari旧版本（这是一个要求）的支持。我也不能使用JavaScript解决此问题，因此必须使用CSS解决方案。

还要注意的一点是，图像的宽度会因图像而异，因此无法在子元素上使用绝对定位并硬编码偏移量。

是否有可能实现？

更新：

为了记录，我刚刚发现可以在旧版本的移动版Safari中使用该方法实现

-webkit-background-size:auto 100px; 

当然，背景将像往常一样使用50%进行左侧定位。如果您需要在其他浏览器上运行此操作，则最佳解决方案可能是接受的解决方案，但由于此问题与iPhone有关，因此此解决方案更加简洁。

- kona

---

你想让图像的中间部分显示在父级 div 中，两侧相等的部分不显示？ - mowwwalker

是的，就像你把一张照片的框架放在另一张更大的照片上并将其居中，然后再裁剪照片一样。但我只关心水平定位，因为父元素和子元素的高度将匹配。 - kona

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;
}

- Joel Salisbury

---

我必须调整大小以适应Retina显示屏。我正在使用大约200像素高的图像，但在100像素容器中显示它们。使用这种方法，就不会出现模糊的情况。 - kona

抱歉，我错过了您说需要调整按钮本身大小的事实！就我所知，我最近也遇到了图标模糊的问题，选择在使用视网膜显示器时仅使用不同的背景图像。例如：@media only screen and (-webkit-min-device-pixel-ratio: 2) - Joel Salisbury

是的，我可能会选择这条路线，但由于这是唯一需要第二个CSS文件的事情，我希望找到一种不需要它的方法。我也可能采取服务器端的方法。有几个选项可用，但很遗憾没有像我想要的那样干净的解决方案。 - kona

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/

- Brett Pontarelli

---

如果我能预测图像的宽度，那么这个方法就可行了。但是这些只是用户上传的随机个人资料图片 :/ 例如，如果源图像为150x200，而图像高度设置为100px，则宽度将按比例缩放为133px。如果它是130x300，则将高度缩放为100px将导致宽度为230px。看到问题了吗？ - kona

用户上传的图片数量没有限制吗？您甚至可以将内部div设置为width: 10225px和left: -5075px。 - Brett Pontarelli

在这种情况下，将.iframe img的高度设置为100px;。我已经更新了我的答案和fiddle以匹配。请注意最终图像的较大（原始）尺寸。 - Brett Pontarelli

哦，我明白你在做什么了。实际上，第一个解决方案很好用。我只需要确保内部 div 使用的宽度始终大于其包含的图像，对吗？如果是这样，非常聪明！ - kona

那比我的答案复杂多了。:P - trusktr

Answer 3

如果您知道 div 的宽度和图像的宽度，您可以简单地进行一些数学计算。

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

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

我们知道div的宽度是200像素，所以图像会被裁剪100像素。如果你想将图像居中，那么在div的边界外的两侧会隐藏50像素。因此，我们将图像的左位置设置为-50像素。

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

明白了吗？

如果你不知道图像大小或div大小，你可以使用JavaScript来检测这些值，并做同样的事情。

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

仅供参考，这里是原始图像。

- trusktr