适合具有固定比例的大小调整图像的容器

Question

我有一个图像，我通过使用div容器缩小。不幸的是，容器适应图像的整个尺寸的宽度。如何使容器适合包含的图像？

.container {
  height: 30px;
  background: black;
}

img {
  height: 100%;
  width: auto;
}

<div class="container">
  <img src="https://compass-ssl.microsoft.com/assets/bc/84/bc84e95b-76b9-4b24-ad5f-9748a2d75b1b.svg?n=microsoft_account_logo_color.svg" alt="">
</div>

Answer 1

制作容器display:inline-block，它将折叠到内容的宽度。

.container {
  height: 30px;
  background: black;
  display: inline-block;
}

img {
  height: 100%;
  width: auto
}

<div class="container">
  <img src="https://compass-ssl.microsoft.com/assets/bc/84/bc84e95b-76b9-4b24-ad5f-9748a2d75b1b.svg?n=microsoft_account_logo_color.svg" />
</div>

Answer 2

这是你在找什么？

.container {
  height: 30px;
  background: black;
  display: inline-block;
}

img {
  height: 100%;
  width: auto
}

<div class="container">
  <img src="https://compass-ssl.microsoft.com/assets/bc/84/bc84e95b-76b9-4b24-ad5f-9748a2d75b1b.svg?n=microsoft_account_logo_color.svg" />
</div>

Answer 3

您可以提供.container display: inline-flex：

.container {
  display: inline-flex;
  height: 30px;
  background: black;
}

img {
  height: 100%;
  width: auto;
}

<div class="container">
  <img src="https://compass-ssl.microsoft.com/assets/bc/84/bc84e95b-76b9-4b24-ad5f-9748a2d75b1b.svg?n=microsoft_account_logo_color.svg" alt="">
</div>