如何将自动尺寸图像元素紧紧包裹在容器中？

Question

举例来说，我有一个保留纵横比的图像，即自动缩放

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>

Answer 1

这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>

Answer 2

从包装器中删除 100%height和width，因为这些值引用包装器的父级而不是其内容。然后，您可以将包装器设置display为inline-block使其遵循其内容的尺寸。最后的修复涉及设置vertical-align: middle;属性以删除由浏览器导致的图像下方的空间，从而允许悬挂在基线下方的字符（g、y 等）的空间。查看下面的片段：img {&nbsp; &nbsp; max-height:100%;&nbsp; &nbsp; max-width:100%;&nbsp; &nbsp; vertical-align: middle;}.wrapper{&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; background:pink; /*verify*/}<div class="wrapper">&nbsp; &nbsp; <img src="https://picsum.photos/200/200"/></div>

Answer 3

不要给包装器提供高度和宽度，这样做会以其父级作为参考。在您的情况下，包装器将是父级高度的 100% 和父级宽度的 100%。你可以像这样制作包装纸img {&nbsp; &nbsp; max-height:100%;&nbsp; &nbsp; max-width:100%;}.wrapper{&nbsp; &nbsp; &nbsp;background:pink; /*verify*/&nbsp; &nbsp; &nbsp;display:inline-block;&nbsp;}<div class="wrapper">&nbsp; &nbsp; <img src="http://placekitten.com/200/300"/></div>通过使用display:inline-block包装器，您可以说浏览器将此元素视为内联元素而不是块元素。height因此，如果未指定和 ，它将自行扩展以容纳其子元素width，并且它不会像块元素那样消耗整个宽度。

Answer 4

您是否尝试过以下操作：<img&nbsp;src="img.jpg"&nbsp;border=1&nbsp;style="padding:50px;border:1px&nbsp;solid&nbsp;red">通过改变“padding”设置来控制边框和图像之间的空间。