调整图像大小以适合 display:flex 个 div

Question

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

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

我在 Whosebug 上看到这可以使用最大高度和最大宽度属性来完成，但我无法达到预期的结果。

我也读过这个但没有帮助：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>

Answer 1

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

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

此外，请记住，您不能在 .card 上设置固定高度并期望图像正确适合，因为可用的 space 不太可能与图像的比例相匹配.因此需要 .card 的动态高度和带有 width: 100%;

的 img 的动态宽度

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

Answer 2

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

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

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

调整图像大小以适合 display:flex 个 div

Resize images to fit display:flex divs

html

css

flexbox