我是 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>uj5u.com熱心網友回復：
對于 a <div>，width: auto設定將意味著其父元素的 100%，因此它會拉伸。
對于影像，width: auto（如果您根本沒有定義，這也是默認值width）將意味著（除非有height設定）影像以其原始大小顯示，因此不會拉伸或收縮。如果您定義width: 100%或類似（或高度設定），它將調整。
我想補充一點，如果影像被拉伸超過其原始比例，它會看起來失真并且質量很差，因此默認情況下將影像拉伸為其父元素的大小確實沒有意義，這可能很容易大于影像本身。
為避免由于拉伸超出原始尺寸而引起的上述變形，一種常用的處理方法是使用max-width: 100%;（以及max-height: 100%如果您為父級定義高度），從而保留width其height默認值auto（= 原始尺寸）。這樣，如果影像至少與最初的父級一樣寬，您會將影像拉伸到全寬，或者如果影像較小，則以原始尺寸顯示（避免由于拉伸超出原始尺寸而導致質量不佳）。在下面的片段中，我只使用了max-width: 100%;（即默認設定下的所有其他內容），將影像寬度限制為父元素寬度（減去填充），避免超出原始寬度并自動調整高度，保持原始高度/寬度比。（順便說一句。我洗掉了你添加的負邊距，這在這種情況下沒有意義）
注意：設定width: 100% 和 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/446938.html