Question

当flex-item中的可变宽度图像设置为max-height: 100%;时，会出现问题。当页面加载弹性框成功获取弹性项目当前大小的宽度时，但是如果您调整浏览器大小以强制图像缩小（或增加），则外部容器不会跟随新宽度。 / p>

如果您在全屏幕下运行下面的代码段，您会在初始加载时看到图像完全被粉红色框包围，但是当您调整大小（使高度变小）时，图像会缩小并且Flex容器会保持不变在相同的宽度。

＆＃13;

.flex {
  display: inline-flex;
  background-color: deeppink;
  height: calc(100vh - 20px);
  border: 10px solid deeppink;
}

.flex-left {
  width: 250px;
}

.flex-right img {
  width: auto;
  min-width: 0;
  max-height: 100%;
}

＆＃13;

<div class="flex">
  <div class="flex-left">
    <h2>Testing headline</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus quia nemo qui ipsam? Temporibus sint necessitatibus expedita, eum quae tempora voluptas dolore facere voluptate! Possimus molestias non commodi. Officiis, iste?</p>
  </div>
  <div class="flex-right">
    <img src="http://unsplash.it/1000/650" alt="">
  </div>
</div>

＆＃13;

Answer 1

尝试向图像容器添加百分比高度。

图像已经灵活，因为其尺寸以百分比设置。容器上的百分比高度，也变得灵活。

jsfiddle demo

＆＃13;

.flex {
  display: inline-flex;
  background-color: deeppink;
  height: calc(100vh - 20px);
  border: 10px solid deeppink;
}

.flex-left {
  width: 250px;
}

.flex-right {
  height: 100%;
}

img {
  max-width: 100%;
  max-height: 100%;
}

＆＃13;

<div class="flex">
  <div class="flex-left">
    <h2>Testing headline</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus quia nemo qui ipsam? Temporibus sint necessitatibus expedita, eum quae tempora voluptas dolore facere voluptate! Possimus molestias non commodi. Officiis, iste?</p>
  </div>
  <div class="flex-right">
    <img src="http://unsplash.it/1000/650" alt="">
  </div>
</div>

＆＃13;

当flex项包含可变宽度图像

1 个答案: