Resize images to fit display:flex divs

问题

How do I resize an image to fit the display:flex child divs? Please refer to this plunk: http://plnkr.co/edit/zqdpqnV7QkKrx7lm1Tsi?p=preview

The image that I am trying to scale is this: http://images.freeimages.com/images/previews/8fe/sky-above-the-black-mountains-1402912.jpg

I read on Stackoverflow that this can be done using max-height and max-width attributes but I am unable to achieve the desired result.

I also read this but it doesnt help: 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>

回答1:

Take the height off .card.md and .card and change max-width: 100%; to width: 100% on the image.

I have also found that max-width: 100% does not work as expected on images within flexbox layouts. I have yet to see (or been able to find) a meaningful reason why, just that "flexbox is new" and browsers don't seem to handle everything as we expect.

Also, bear in mind, you can't have a fixed height on that .card and expect the image to fit correctly as the available space will not likely match the proportions of the image. Hence the need for the dynamic height of the .card and the dynamic width of the img with width: 100%;

Check the updated plunk: http://plnkr.co/edit/0CiALVFdKT1uioOjsmZe?p=preview

回答2:

If I got what you mean, I fixed the plunk.

Basically, you have to delete overflow:hidden; from your image and give it a z-index less than the other contents you want over it.

I hope that's what you mean and need.

来源：https://stackoverflow.com/questions/33881457/resize-images-to-fit-displayflex-divs

标签

html

css

flexbox