为什么 div 拉伸正确但图像不正确？

Question

我是 HTML/CSS 的新手，很好奇为什么 div 在下面的示例中正确拉伸，但不是图像？

图像的计算方式是否与 div 不同？
是否有 MDN 文档我可以阅读更多关于此行为的信息？

body {
  background: #222;
  padding: 32px;
}

.card {
  background-color: white;
  padding: 32px;
  border-radius: 8px;
}

img {
  width: auto;
  margin: 0px -32px 0px -32px;
}

.gooddiv {
  width: auto;
  height: 100px;
  margin: 0px -32px 0px -32px;
  border: 2px solid red
}

<div class="card">
  <img alt="SG Image" src="https://images.unsplash.com/photo-1508964942454-1a56651d54ac?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1035&q=80" />
  <div class="gooddiv"></div>
</div>

Answer 1

对于 <div>，width: auto 设置将意味着其父元素的 100%，因此它会拉伸。

对于图像，width: auto（如果您根本不定义 width，这也是默认值）将意味着（除非有 height 设置）图像以其原始大小显示，因此不会拉伸或缩小。如果您定义 width: 100% 或类似（或高度设置），它将调整。

我想补充一点，如果图像被拉伸到超出其原始比例，它看起来会变形并且质量很差，因此默认情况下将图像拉伸到其父级的大小确实没有意义元素，它可能很容易比图像本身大。

为了避免由于拉伸超出原始大小而导致的上述失真，一种常见的处理方法是使用 max-width: 100%;（如果您为父级定义了高度，也可以使用 max-height: 100%），从而留下width 和 height 默认为 auto（= 原始大小）。这样，如果图像至少与原始父级一样宽，则将其拉伸至全宽，或者如果图像较小，则以原始尺寸显示（避免由于拉伸超出原始尺寸而导致质量不佳）。在下面的代码片段中，我只使用了 max-width: 100%; （即默认设置下的所有其他内容），它将图像宽度限制为父元素宽度（减去填充），避免拉伸超出原始宽度并自动调整高度，保持原来height/width比例。（顺便说一句。我删除了您添加的负边距，这在这种情况下没有意义）

注意：设置 width: 100% 和 height: 100% 对于图像不是一个好主意，因为在大多数情况下这会扭曲图片的 height/width 比例，使它看起来很糟糕（除非它是一个抽象图形模式，其中高度和宽度之间的比例失调无关紧要）。

body {
  background: #222;
  padding: 32px;
}

.card {
  background-color: white;
  padding: 32px;
  border-radius: 8px;
}

img {
  max-width: 100%;
  margin: 0;
}

.gooddiv {
  width: auto;
  height: 100px;
  margin: 0px -32px 0px -32px;
  border: 2px solid red
}

<div class="card">
  <img alt="SG Image" src="https://images.unsplash.com/photo-1508964942454-1a56651d54ac?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1035&q=80" />
  <div class="gooddiv"></div>
</div>

为什么 div 拉伸正确但图像不正确？

Why does the div stretch correctly but not image?

html

css

image