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

Question

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

img {
    max-height:100%;
    max-width:100%;
}

我现在需要将其包含在一个容器中，用类似的东西将其完美包裹起来

.wrapper{
     height:100%;
     width:100%;
     background:pink; /*verify*/
 }

但是 wrapper 在拐 Angular 处留下了额外的空间。你怎么解决这个问题？ 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 是 block level element 。因此它跨越了可用的宽度。如果您希望包装元素环绕图像而不需要额外的空间，您可以将其显示属性设置为 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>