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

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 {

    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>

Answer 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，并且它不会像块元素那样消耗整个宽度。

Answer 4

您是否尝试过以下操作：

<img src="img.jpg" border=1 style="padding:50px;border:1px solid red">

通过改变“padding”设置来控制边框和图像之间的空间。