html将图像的框模型约束到它所覆盖的区域

Question

我在可变纵横比的矩形div中有一个正方形图像。我将其属性对象设置为适合：包含；它可以动态调整大小以填充div，但不能超过div。然而，我有一个imagemap，问题就出在这里：尽管实际图像只占据了矩形div的一部分，但图像的boxmodel还是扩展到了矩形div。有没有什么方法可以约束boxmodel只占据图像使用的空间，或者以某种方式在javascript中获取有关该空间的信息？

谢谢！

Answer 1

您可以使用width: 100%、height: 100%和object-fit: cover，或者更好的选项是background-image、background-size: cover和background-repeat: no-repeat。

.img-container {
width: 400px;
height: 400px;
background: gray;
}
#img1 {
background-image: url(https://picsum.photos/600/200);
background-size: cover;
background-repeat: no-repeat;
}
#img2 {
width: 100%;
height: 100%;
object-fit: cover;
}

<p>Use background (the better option)</p>
<div class="img-container" id="img1"></div>
<br>
<p>Use full width/height and object-fit</p>
<div class="img-container">
<img src="https://picsum.photos/600/200" id="img2">
</div>

在此处了解这些信息：

第一个解决方案：

• 背景图像
• 背景大小
• 背景重复

第二个解决方案：

• 宽度&高度(尺寸(
• 对象拟合