为什么 max-width 和 width 显示的结果完全不同？

Question

我正在研究我的 CSS 技能，通过观看 Kevin Powell 的视频“如何使用 CSS object-fit 来控制你的图像”，我不明白为什么要使用max-width 或 width 会完全改变结果。这是 HTML:

<div class="card"> 
 
  <img class="card__image" src="//unsplash.it/500" alt="">

</div>

这里是第一个CSS代码（注意tard .card__image的宽度）

.card{
background: lightgreen;
width: 350px;
padding: 3rem;
}

.card__image{
width: 100%;
height: 150px;
}

在 CSS 代码的第二个版本中，我们将 .card__image 的宽度切换为“最大宽度”。现在我不明白为什么当我们使用“width”时，图像被拉伸并占据了它所在父元素的整个宽度，但是当我们使用“max-width”时，它就好像不再专注于父元素但在图像本身上。它按比例固定图像的尺寸，因此图像将出现在父元素内的 full/no 拉伸中。

结果，使用“width”，图像被拉伸并占据了整个父元素的 space。使用“max-width”时，图像不会被拉长，而是简单地占据它需要的任何数量 space。

怎么会？

Answer 1

The difference between width: 100% and max-width:100% is that: First, width define the width of the specific element while max-width define the maximum size the element is allow to have link

为什么 max-width 和 width 显示的结果完全不同？

Why does max-width and width display a completely different result?

css

image

dimensions

width

image-resizing