将图像比例保持在 flexbox 内？答案

【问题标题】：Keeping an image proportion inside of a flexbox?将图像比例保持在 flexbox 内？
【发布时间】：2023-03-14 09:22:01
【问题描述】：

如何让图像保持在弹性框的范围内？

框展开时图像的宽度和高度应增大/缩小，因此没有绝对值。
高度 100% 与宽度一起使用时会使图像倾斜。
我不想隐藏溢出的内容。
仅适用于所有浏览器的 CSS 解决方案。

所以基本上我追求的是让图像保持在它的父 flexbox 内，保持图像纵横比的东西。

.container {
  display: flex;
  height: 40px;
  width: 100%;
}

.inner {
  flex-basis: 100px;
  background: gold;
}

.empty {
  background: blue;
  flex: 1;
}

img {
  width: 100%;
}

<div class="container">
  <div class="inner">
    <img src="https://pmcdeadline2.files.wordpress.com/2016/07/logo-tv-logo.png">
  </div>
  <div class="empty">
  </div>
</div>

【问题讨论】：

标签： css flexbox

【解决方案1】：

为您的 img

使用 max- 值

.container {
  display: flex;
  height: 40px;
  width: 100%;
}

.inner {
  flex-basis: 100px;
  background: gold;
  text-align:center;
}

.empty {
  background: blue;
  flex: 1;
}

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

<div class="container">
  <div class="inner">
    <img src="https://pmcdeadline2.files.wordpress.com/2016/07/logo-tv-logo.png">
  </div>
  <div class="empty">
  </div>
</div>

【讨论】：

谢谢，但是如果图像小于其父级的宽度怎么办？
实际上将是 img 的最大大小...@panthro 强制 img 大于其原始大小、像素化是不好的做法...如果您希望该选项可以是使用 img 作为背景。
@panthro 不确定我是否理解，但会添加：如果图像要保持它的纵横比并且您有一个设定的高度并且包含的元素与图像的纵横比不匹配，则有将在某处留下空间。
DaniP - svg 不会像素化。
@panthro 我不是我只是想帮忙，例如，您是否将您的徽标从 illustrator 导出为 SVG？有 flexible 选项...在您的问题中包含 SVG 部分和真实的 SVG 图像...

【解决方案2】：

这里的问题是容器的固定高度，删除它，您的图像应该留在内箱内。

.container {
  display: flex;
  width: 100%;
}

.inner {
  flex-basis: 100px;
  background: gold;
}

.empty {
  background: blue;
  flex: 1;
}

img {
  width: 100%;
}

<div class="container">
  <div class="inner">
    <img src="https://pmcdeadline2.files.wordpress.com/2016/07/logo-tv-logo.png">
  </div>
  <div class="empty">
  </div>
</div>

如果你想要 40px 的容器，试试这个：

.container {
  display: flex;
  height: 40px;
  width: 100%;
}

.inner {
  width: 100px;
  background: gold;
  text-align:center;
}

.empty {
  background: blue;
  flex: 1;
}

img {
  height: 100%;
}

<div class="container">
  <div class="inner">
    <img src="https://pmcdeadline2.files.wordpress.com/2016/07/logo-tv-logo.png">
  </div>
  <div class="empty">
  </div>
</div>

【讨论】：