Question

目前在登陆屏幕上工作，用户在网站上选择颜色主题。有两个颜色的侧面在悬停时“成长”，给出了在模型面前看到的网站着色的效果。（查看下面的Codepen来得到我的意思，它有点难以完全解释）

要对模型进行“着色”，将两个图像放在另一个上面。它需要响应，所以我给了后面的图像width: 100%; height: auto;，它也用来指示父div的大小。顶部图像设置为width: auto; height: 100%;，因为使用宽度100％会导致图像拉伸而不会剪切。

问题是，覆盖的图像看起来更大，正如您在下面的链接中看到的那样，可以产生切割图像效果。当您交换100％和自动周围时，或许在计算尺寸方面存在差异？

希望这只是我的脑屁，我在某个地方犯了一个菜鸟错误！

Answer 1

图像默认为inline元素，这意味着它们周围有一些间距。您将其他图像设置为position: absolute，这使它们显示类似于block元素 - 即。没有默认间距。

简单的解决方案是将display: block添加到您的图片元素：

.img {
    display: block;
}