举例来说，我有一个保留纵横比的图像，即自动缩放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条经验 获得超12个赞
您是否尝试过以下操作：
<img src="img.jpg" border=1 style="padding:50px;border:1px solid red">
通过改变“padding”设置来控制边框和图像之间的空间。
- 4 回答
- 0 关注
- 73 浏览
添加回答
举报
0/150
提交
取消