Css 如何将'；它比它的母部门宽？

我试图将绝对定位的img放在相对定位的div中，并且图像比其父图像大（在767px或更低的窗口中）。但图像的固定宽度为767px。让我感到困难的是父div没有固定的宽度，它有100%的宽度，因此我必须在每次调整大小时为“left”属性生成正确数量的像素，但我不知道如何生成。我尝试设置百分比，但在调整大小时没有成功

我已经能够用javascript实现这一点，但我更希望有一个css解决方案，因为javascript对我来说并不一致

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

感谢您的帮助

html代码：

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

---

通过组合相对单位和绝对单位以及

左侧

和

左侧边距

：

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

---

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

一种不需要硬编码一半宽度的方法

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

您可以这样做：

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

---

为什么图像上的

min width

–如果容器宽度大于767px，是否希望图像拉伸以填充整个容器宽度？如果容器宽度大于767px，则需要填充整个容器。使用“min width”（最小宽度）时，图像仍保持767px（如我所需），但使用正常的“width”（宽度）时，当窗口小于767px时，图像将随窗口收缩。您也可以不使用固定像素值进行此操作：

left:-500%；右图：-500%；保证金：自动–将图像从容器中“拖动”到两侧，然后自动边距将其再次居中于该范围内。百分比值必须“足够大”，这样即使对于一个非常窄的容器，它仍然会将图像拖到足够远的两侧，因为百分比与容器的宽度有关。因此，对于一个非常小的容器，它在某一点之后将不再工作–如果您使用开发工具在我的小提琴中手动将容器宽度设置为70px左右，然后进一步减小它，您将看到效果。因此，有用性取决于您的容器是否能够变得如此狭窄。通过使用更高的百分比，您可以将其控制到某一点–百分比×容器宽度必须至少等于图像宽度的一半。但是使用非常极端的百分比（比如5000%）可能会对渲染性能产生负面影响。@CBroe太棒了，谢谢！我已经搜索了一段时间，你的评论对我的问题有效。我认为这比公认的答案更简单。
left: 50%;
transform: translateX(-50%);