调整图像大小以适应显示：flex div答案

【问题标题】：Resize images to fit display:flex divs调整图像大小以适应显示：flex div
【发布时间】：2016-02-26 04:10:39
【问题描述】：

如何调整图像大小以适应 display:flex 子 div？请参考这个plunk：http://plnkr.co/edit/zqdpqnV7QkKrx7lm1Tsi?p=preview

我要缩放的图像是这样的：http://images.freeimages.com/images/previews/8fe/sky-above-the-black-mountains-1402912.jpg

我在 Stackoverflow 上读到，这可以使用 max-height 和 max-width 属性来完成，但我无法达到预期的结果。

我也读过这篇文章，但没有帮助：http://www.w3schools.com/css/css_rwd_images.asp

CSS：

    .card {
  position: relative;
  z-index: 2;
  box-shadow: 0 0.1rem 0.2rem #aaa;
  background: #fff;
  border-radius: 0.2rem;
  margin: 0.5rem 0 1rem 0;
  height: 10rem;
  display: flex;
  flex-direction: column;
}

.card.sm {
  height: 10rem;
}

.card.sm .card-action {
  padding: 0.5rem;
}

.card.md {
  height: 20rem;
}

.card.md .card-action {
  padding: 1rem;
}

.card.lg {
  height: 30rem;
}

.card.lg .card-action {
  padding: 1.5rem;
}

.card .card-content {
  padding: 1rem;
  flex: 8;
  overflow:auto;
  overflow-y: scroll;
}

.card .card-content .card-title {
  font-weight: bold;
  font-size: 1.1rem;
}

.card .card-action {
  flex: 2;
  max-height: 5%;
  padding: 1rem;
  border-top: 0.1rem solid rgba(160, 160, 160, 0.2);
  text-transform: uppercase;
}

.card .card-image {
  position: relative;
  flex: 24;
  overflow:hidden;
}

.card .card-image img {
  border-radius: 2px 2px 0 0;
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  max-width: 100%;
  max-height: 100%;
}

HTML：

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <div style="width:30rem">
    <div class="card md">
      <div class="card-image">
        <img src="http://images.freeimages.com/images/previews/8fe/sky-above-the-black-mountains-1402912.jpg"/>
      </div>
      <div class="card-content">
        <span class="card-title">Title</span>
        <p>Some content</p>
      </div>
      <div class="card-action">
        <a href="#">ACTION 1</a>
        <a href="#">ACTION 2</a>
      </div>
      <div class="card-action">
        <a href="#">ACTION 3</a>
        <a href="#">ACTION 4</a>
      </div>
    </div>
  </div>

  <div style="width:30rem">
    <div class="card md">
      <div class="card-content">
        <span class="card-title">Title</span>
        <p>Some content</p>
      </div>
      <div class="card-action">
        <a href="#">ACTION 1</a>
        <a href="#">ACTION 2</a>
      </div>
      <div class="card-action">
        <a href="#">ACTION 3</a>
        <a href="#">ACTION 4</a>
      </div>
    </div>
  </div>
</body>

</html>

【问题讨论】：

从视觉上看，您到底想完成什么？
我在卡片图像 div 中显示的图像应根据 div 的大小进行缩放。如果您现在查看 plunk，图像会被裁剪掉。我希望整个图像以卡片图像 div 的大小显示
你的意思是plnkr.co/edit/h2CZGwqoyJaiAnWeF8fn?p=preview 吗？
嗨，盖比。我没有在您上面粘贴的 plunk 中看到完整的图像。图片由于某种原因被裁剪
在下面查看我更新的 plunk，您应该会看到预期的完整图像。

标签： html css flexbox

【解决方案1】：

去掉.card.md和.card的高度，把图片上的max-width: 100%;改为width: 100%。

我还发现max-width: 100% 在 flexbox 布局中的图像上无法正常工作。我还没有看到（或能够找到）一个有意义的原因，只是“flexbox 是新的”而且浏览器似乎并没有像我们预期的那样处理所有事情。

另外，请记住，您不能在 .card 上设置固定高度并期望图像能够正确匹配，因为可用空间可能与图像的比例不匹配。因此需要.card 的动态高度和width: 100%; 的img 的动态宽度

检查更新的 plunk：http://plnkr.co/edit/0CiALVFdKT1uioOjsmZe?p=preview

【讨论】：

谢谢。是的，看起来这是弹性盒子的问题。删除高度对于我给出的要求来说是一件大事。但我想我将不得不用最小高度替换它。谢谢你的帮助。我会接受你的回答。
很好，很高兴它有帮助。

【解决方案2】：

如果我明白你的意思，我修复了plunk。

基本上，您必须从图像中删除overflow:hidden;，并为其指定一个小于您想要覆盖的其他内容的 z-index。

我希望这就是你的意思和需要。

【讨论】：

感谢 AndreaM16。我一直在寻找 Brian 上面提到的内容，但知道这一点真的很酷。再次感谢！赞成你的回答。
没问题，我只是误解了你真正的问题。很高兴您发现我的解决方案很有用。