如何使用Flexbox将可分解的div包裹在图像周围

Question

我试图在宽度或高度变化时试图围绕图像缠绕。

问题是，当宽度变化时，div不会紧密包裹孩子，在这种情况下，孩子是一个图像：

围绕图像当前结果的包裹div

我确实确定在调整DIV大小时将行和列之间的挠性方向求解，并且可以使用诸如调整大小的观察者之类的东西来切换flex方向，但希望有CSS解决方案？

这是一个有问题的代码笔： https：//codepen.io/quinnaz/quinnaz/pen/quinnaz/pen/pen/rnjdjjy

<div class="container direction-row">
  <div class="border">
    <img src="https://dummyimage.com/400x600/d4b9d4/7477a3.png" class="img-element" />
  </div>
</div>

.container {
  resize: both;
  overflow: auto;
  background-color: beige;
  border: solid;
  display: flex;
}

.direction-row {
  flex-direction: row;
}
.direction-col {
  flex-direction: column;
}

.img-element {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.border {
  border-width: 50px;
  border-color: blue;
  border-style: solid;
}

Answer 1

您需要使用object-fit属性，并将其提供值cover。我还将分别更改Max Width和最大高处分别为width和height。

替换的内容（在这种情况下为图像）的大小以维持其长宽比，同时填充元素的整个内容框。如果对象的纵横比与其框的纵横比不匹配，则将剪辑对象以适合。

codepen link https://codepen.io/thechewy/thechewy/thechewy/pen/pen/pen/pen/pen/pen/perpen/perxevo

.img-element {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

** 编辑 **

如果您希望它完全适合.container div，则需要制作.border div用width填充父.container不过，问题不清楚。如果不是上面的片段，则应该解决问题。

我个人只会将边框添加到图像中，然后删除额外的DIV和CSS。