比其父div宽的绝对元素（img）如何居中？

Question

我正在尝试将绝对位置的img居中放置在相对位置的div中，并且图像大于其父对象（在767px或更小的窗口中）。但是图片确实有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 {
    left: 50%;
    margin-left: -383.5px; /* Half of the width */
    min-width: 767px;
    position: absolute;
}

这仅是因为您在问题中提到图像的宽度固定为767px。如果确实只是最小值，并且可以增大，则需要使用其他方法。

Answer 2

一种无需硬编码一半宽度的方法。

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

您可以改为：

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