Html 为什么 div 可以正确拉伸，但不能正确拉伸图像

发布于03月19日

我不熟悉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>

推荐答案

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

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

我想补充一点，如果一个图像被拉伸到超出其原始比例，它看起来会扭曲，质量也会很差，所以在默认情况下，将图像拉伸到其父元素的大小是没有意义的，它可能很容易比图像本身大.

为了避免由于拉伸超出原始尺寸而引起的变形，一种常见的处理方法是使用max-width: 100%;(如果为父对象定义了高度，则使用max-height: 100%)，从而将width和height保留为默认的auto(=原始尺寸).这样，如果图像的宽度至少与父图像的宽度相同，则可以将图像拉伸到全宽；如果图像较小，则可以将其显示为原始大小(避免因拉伸超过原始大小而导致质量差).在下面的片段中，我只使用了max-width: 100%;(即默认设置下的所有其他设置)，这将图像宽度限制为父元素宽度(减go 填充)，避免拉伸超过原始宽度，并自动调整高度，保持原始高宽比.(顺便说一句，我删除了你添加的负边距，在这种情况下没有意义)

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

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>

Html 为什么 div 可以正确拉伸，但不能正确拉伸图像

推荐答案

Html相关问答推荐

如何防止可见的滑动抽屉，同时转移HTML方向？

使用css第n个子元素，如何迭代Y组中的X个元素？

仅在加载视频时显示描述(<；Video>；标签)

页脚与主要内容重叠

摆动的html标签

不能以Angular 更改输入的S边框 colored颜色

OnChange函数未在下拉列表中使用一个选项触发

将文本保持在平行四边形内并遵循形状

：invalid Select 器的惰性判断

Div 容器不会遵守边距、填充或间隙

Angular MatBadge 在高于 99 时不显示完整数字

将三个div转换为显示flex

Mediawiki css/html 信息框创建空白行

是否可以设置用户在联系表单中输入的文本字体的样式

浮动元素忽略 margin-top 属性后的块元素

我怎么能有：not(.class)：nth-of-type(even)？

如何自定义具有白色透明背景的光标图像？

标题之间和之后的 Hr 线

水平滚动框不显示所有元素

在批处理文件中显示特定的 HTML 文本