居中一个大于100％的元素

Question

我难以将一个比它的父元素大的图像居中。我已将min-width和min-height设置为100％，以便图片始终填充父元素。

当图像没有父元素的比例时，会出现视觉问题。图像在右侧或底侧被裁剪得太多。

我想当我只是将图像居中时，我可以绕过这个问题，因此图片中最重要的部分不会被裁剪。有没有办法使图像中心比它的父元素大？ （不改变c的父元素）

我宁愿看到一个面向CSS的答案而不是javascript，因为在遍历DOM中的大量图像时存在性能问题。

以下是父http://d.pr/kEcb中包含的两张图片的屏幕截图的一部分。图像大小没问题，但我不能让它们居中

Answer 1

尝试这种效果。

img/div/whatever {
   left: 50%;
   margin-left: **Half of image width**
}

Answer 2

对父div使用overflow属性 如果你想查看来自div的图像使用可见的其他使用滚动

Answer 3

最简单的css解决方案是将图像设置为父图像的背景图像

{background-repeat：no-repeat; background-position：center center;}