Question

我的情况是我需要将图像扩展到它的容器大小，这是一个柔性盒子，不能有固定的高度。

直接容器嵌套在几层柔性盒内，外层需要高达80vh。

我发现当容器的高度和宽度设置为百分比时，图像不会垂直调整大小。有没有人为此工作？我需要一个具有各种宽高比（一些肖像，一些风景）的几个图像的一致解决方案。

谢谢！

请参阅下面的Code和CodePen链接： https://codepen.io/anon/pen/NgZByM?editors=1100

<div class="wrapper">
  <div class="imperial-image-wrap">
    <section class="imperial-image-card">
      <div class="image-icon-container">
        <div class="previous">
        </div>
        <figure>
          <img src="http://ghk.h-cdn.co/assets/16/09/980x490/landscape-1457107485-gettyimages-512366437.jpg" />
        </figure>
        <div class="next">
        </div>
      </div>
      <section class="action-icons">
        <span>This is a fixed with</span>
      </section>
      <div class="asset-description">
        <div class="asset-title">
          <span>This needs the ability to expand to fit it's content, which is variable.</span>
        </div>  
      </div>
    </section>
  </div>
  <div class="buy-details">
    <span>This is where the details go</span>
  </div>
</div>

.wrapper {
  display:flex;
  height: 80vh;
}
.buy-details {
  width: 350px;
  padding: 10px;
  border: 1px solid black;
}
.imperial-image-wrap {
  width:calc(100%-350px);
  height:80vh;
}
.imperial-image-card {
  height:100%;
  display:flex;
  flex-direction: column;
}
.image-icon-container {
  flex:2 1 auto;
  display:flex;
}
.action-icons {
  border: 1px solid purple;
  display:flex;
  justify-content:center;
  min-height: 15px;
}
.asset-description {
  width: 100%;
  border: 1px solid red;
}
.previous, .next {
  min-width: 15px;
  border: 1px solid red;
}
figure {
  display:flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}
img {
  max-height:100%;
  max-width:100%;
  margin: auto;
}

Answer 1

从我在你的代码笔中看到的，问题是图像超过div的事实。

我已将数字更改为 最大高度：100％而非高度：100％

现在看起来不错：https://codepen.io/anon/pen/Zygxqw?editors=1100

.wrapper {
  display:flex;
  height: 80vh;
}
.buy-details {
  width: 350px;
  padding: 10px;
  border: 1px solid black;
}
.imperial-image-wrap {
  width:calc(100%-350px);
  height:80vh;
}
.imperial-image-card {
  height:100%;
  display:flex;
  flex-direction: column;
}
.image-icon-container {
  flex:1;
  display:flex;
}
.action-icons {
  border: 1px solid purple;
  display:flex;
  justify-content:center;
}
.asset-description {
  width: 100%;
  border: 1px solid red;
}
.previous, .next {
  min-width: 45px;
  border: 1px solid red;
}
figure {
  display:flex;
  width: 100%;
  max-height: 100%;
}
img {
  max-width: 100%;
}

没有指定高度的容器中嵌套的flex元素

1 个答案: