如何将比其父 div 宽的绝对元素 (img) 居中？

Question

我试图将绝对定位的 img 置于相对定位的 div 内，并且图像比其父图像大（767 像素 window 或更低）。但是图像确实有固定宽度 767px。对我来说很难的是父 div 没有固定宽度，它有 100% 宽度所以我必须以某种方式为每个 'left' 属性生成正确数量的像素调整大小，但我不知道如何。我尝试设置百分比，但在调整大小时没有成功。

我已经能够用 javascript 做一些事情，但我宁愿有一个 css 解决方案，因为 javascript 对我来说并不总是有效。

当父 div 小于 767px 并且 img 在 div 内始终保持 767px 且高度为 257px 时，我需要能够将 img 居中。

感谢任何帮助！

html代码：

<div class="item">
  <img src="...">
</div>

css:

.item{
position:relative;
height:257px;
overflow:hidden;
}

.item img{
min-width:767px;
position:absolute;
}

Answer 1

通过组合相对和绝对单位以及 left 和 margin-left:

.item img {
    <b>还剩：50%；
    左边距：-383.5px； /* 宽度的一半 */</b>
    最小宽度：767px；
    位置：绝对；
}

这只是因为你在问题中提到图片的宽度固定为767px；如果它真的只是最小值并且可以变大，则需要使用不同的方法。

Answer 2

无需硬编码一半宽度即可执行此操作的方法。

例如，您的子元素可能具有您无法预测的可变宽度

您可以这样做：

left: 50%;
transform: translateX(-50%);

如何将比其父 div 宽的绝对元素 (img) 居中？

How center an absolute element (img) that's wider than its parent div?

css

css-position

absolute