我正在研究我的 CSS 技能，并通過觀看 Kevin Powell 的視頻“如何使用 CSS 物件匹配來控制您的影像”，我無法理解為什么使用 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 的寬度切換為“max-width”。現在我不明白為什么當我們使用“寬度”時，影像被拉伸并占據了它所在的父元素的整個寬度，但是當我們使用“最大寬度”時，就好像它不再關注父元素，但在影像本身。它按比例固定影像的尺寸，因此影像將在父元素內以完全/不拉伸的形式出現。
結果，使用“寬度”，影像被拉伸并占據整個父元素的空間。使用“最大寬度”，影像不會被拉伸，而只是占用它需要的任何空間。
怎么來的 ？
uj5u.com熱心網友回復：
width: 100% 和 max-width:100% 的區別在于：首先，width定義了特定元素的寬度，而max-width定義了元素允許鏈接的最大尺寸
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/481792.html
上一篇：勾選框時無法觸發自定義復選框