舉例來說，我有一個保留縱橫比的圖像，即自動縮放img { max-height:100%; max-width:100%;}我現在需要將其包含在一個容器中，用類似的東西將其完美包裹.wrapper{ height:100%; width:100%; background:pink; /*verify*/ }但包裝紙在角落處留下了額外的空間。你怎么解決這個問題？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貢獻1887條經驗 獲得超5個贊
這div是一個塊級元素。因此它跨越了可用的寬度。如果您希望包裝元素環繞圖像而不需要額外的空間，您可以將其顯示屬性設置為inline-flex。這會將包裝寬度設置為其內容的寬度和高度。
我在示例中設置了 2 個像素的額外填充，以可視化環繞效果。
.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貢獻1805條經驗 獲得超9個贊
從包裝器中刪除 100%height和width，因為這些值引用包裝器的父級而不是其內容。然后，您可以將包裝器設置display為inline-block使其遵循其內容的尺寸。
最后的修復涉及設置vertical-align: middle;屬性以刪除由瀏覽器導致的圖像下方的空間，從而允許懸掛在基線下方的字符（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貢獻1828條經驗 獲得超3個贊
不要給包裝器提供高度和寬度，這樣做會以其父級作為參考。在您的情況下，包裝器將是父級高度的 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包裝器，您可以說瀏覽器將此元素視為內聯元素而不是塊元素。height因此，如果未指定和 ，它將自行擴展以容納其子元素width，并且它不會像塊元素那樣消耗整個寬度。
開滿天機
TA貢獻1786條經驗 獲得超13個贊
您是否嘗試過以下操作：
<img src="img.jpg" border=1 style="padding:50px;border:1px solid red">
通過改變“padding”設置來控制邊框和圖像之間的空間。
- 4 回答
- 0 關注
- 158 瀏覽
添加回答
舉報
0/150
提交
取消