Question

我试图将绝对定位的img居中在相对定位的div中，并且图像大于其父级（在767px窗口或更低的窗口中）。但图像的固定宽度为767px。让我难以理解的是，父div没有固定的宽度，它有100％的宽度，所以我必须以某种方式为左边的＆＃39;生成正确数量的像素。每个调整大小的属性，但我不知道如何。我尝试设置百分比，但在调整大小时没有成功。

我已经能够通过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%);

如何将一个绝对元素（img）放在比其父div更宽的位置？

2 个答案: