为什么物体不适合宽度或高度？

Question

我在100*300px div中有一个240*240px的图像(演示值,实际值有所不同,未知).我用它object-fit: contain来使图像在div内部完全可见,并保持其纵横比.问题是object-fit没有修改图像的宽度,导致一个奇怪的"填充"(可以这么说).

如何使图像只需要所需的宽度,而不是采用原始宽度？

演示:http://codepen.io/alexandernst/pen/ONvqzN

.wrapper {
  height: 100px;
  width: 300px;
  border: 1px solid black;
}
.flex {
  display: flex;
}
img {
  object-fit: contain;
}

<div class="flex wrapper">
  <img src="https://unsplash.it/240/240" />
</div>

Answer 1

.wrapper {
  height: auto;
  width: 100%;
  border: 1px solid black;
  background-image: url(https://unsplash.it/240/240);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.flex {
  display: flex;
}

img {
  object-fit: contain;
}

<div class="flex wrapper">
  <img src="https://unsplash.it/240/240" />
</div>