响应式图像 - 宽度差异：100% / 宽度：自动答案

【问题标题】：Responsive Images - Differences with width: 100% / width:auto响应式图像 - 宽度差异：100% / 宽度：自动
【发布时间】：2015-11-25 21:09:09
【问题描述】：

目前正在开发用户在网站上选择颜色主题的登陆屏幕。悬停时有两个“增长”的颜色面，可以为在前面的样机上看到的网站着色。（查看下面的 Codepen 以了解我的意思，这有点难以完全解释）

为了给模型“上色”，两张图片相互叠加。它需要响应，所以我给出了背面图像width: 100%; height: auto;，它也用于指示父 div 的大小。顶部图像设置为width: auto; height: 100%;，因为使用宽度 100% 会导致图像拉伸而不是剪辑。

问题是，叠加的图像看起来更大，如您在下面的链接中看到的那样，提供了剪切图像效果。当您交换 100% 和 Auto 时，大小的计算方式可能会有所不同？

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

【问题讨论】：

【解决方案1】：

默认情况下，图像是inline 元素，这意味着它们周围自然有一些间距。您正在将其他图像设置为 position: absolute，这会导致它们显示类似于 block 元素 - 即。没有默认间距。

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

.img {
    display: block;
}

【讨论】：