舉例來說，我有一個(gè)保留縱橫比的圖像，即自動(dòng)縮放img { max-height:100%; max-width:100%;}我現(xiàn)在需要將其包含在一個(gè)容器中，用類似的東西將其完美包裹.wrapper{ height:100%; width:100%; background:pink; /*verify*/ }但包裝紙?jiān)诮锹涮幜粝铝祟~外的空間。你怎么解決這個(gè)問題？HTML 很簡單<div class="wrapper"> <img src="image.jpg"/></div>這是代碼片段：img { max-height:100%; max-width:100%;}.wrapper{ height:100%; width:100%; background:pink; /*verify*/}<div class="wrapper"> <img src="https://picsum.photos/200/200"/></div>
4 回答
慕工程0101907
TA貢獻(xiàn)1887條經(jīng)驗(yàn) 獲得超5個(gè)贊
這div是一個(gè)塊級元素。因此它跨越了可用的寬度。如果您希望包裝元素環(huán)繞圖像而不需要額外的空間，您可以將其顯示屬性設(shè)置為inline-flex。這會將包裝寬度設(shè)置為其內(nèi)容的寬度和高度。
我在示例中設(shè)置了 2 個(gè)像素的額外填充，以可視化環(huán)繞效果。
.wrapper {
? padding: 2px;
? display: inline-flex;
? background-color: red;
}
.image {
? max-width: 100%;
? max-height: 100%;
}
<div class="wrapper">
? <img class="image" src="https://via.placeholder.com/300x400" alt="" />
</div>
Cats萌萌
TA貢獻(xiàn)1805條經(jīng)驗(yàn) 獲得超9個(gè)贊
從包裝器中刪除 100%height和width，因?yàn)檫@些值引用包裝器的父級而不是其內(nèi)容。然后，您可以將包裝器設(shè)置display為inline-block使其遵循其內(nèi)容的尺寸。
最后的修復(fù)涉及設(shè)置vertical-align: middle;屬性以刪除由瀏覽器導(dǎo)致的圖像下方的空間，從而允許懸掛在基線下方的字符（g、y 等）的空間。
查看下面的片段：
img {
max-height:100%;
max-width:100%;
vertical-align: middle;
}
.wrapper{
display: inline-block;
background:pink; /*verify*/
}
<div class="wrapper">
<img src="https://picsum.photos/200/200"/>
</div>
子衿沉夜
TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超3個(gè)贊
不要給包裝器提供高度和寬度，這樣做會以其父級作為參考。在您的情況下，包裝器將是父級高度的 100% 和父級寬度的 100%。
你可以像這樣制作包裝紙
img {
max-height:100%;
max-width:100%;
}
.wrapper{
background:pink; /*verify*/
display:inline-block;
}
<div class="wrapper">
<img src="http://placekitten.com/200/300"/>
</div>
通過使用display:inline-block包裝器，您可以說瀏覽器將此元素視為內(nèi)聯(lián)元素而不是塊元素。height因此，如果未指定和 ，它將自行擴(kuò)展以容納其子元素width，并且它不會像塊元素那樣消耗整個(gè)寬度。
開滿天機(jī)
TA貢獻(xiàn)1786條經(jīng)驗(yàn) 獲得超13個(gè)贊
您是否嘗試過以下操作：
<img src="img.jpg" border=1 style="padding:50px;border:1px solid red">
通過改變“padding”設(shè)置來控制邊框和圖像之間的空間。
- 4 回答
- 0 關(guān)注
- 173 瀏覽
添加回答
舉報(bào)
0/150
提交
取消