Question

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

当框展开时，图像的宽度和高度应该增大/缩小，因此没有绝对值。
当使用宽度时，高度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>

Answer 1

使用 img

的max-值

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

Answer 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>

在Flexbox中保持图像比例？

2 个答案: