Resize images to fit display:flex divs

Question

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>

the image that i am display in the card-image div should scale according to the size of the div. if you look at the plunk now, the image is cropped out. i want the whole image to appear in the size of the card-image div — takeradi, Nov 23 '15 at 22:04
do you mean http://plnkr.co/edit/h2CZGwqoyJaiAnWeF8fn?p=preview ? — Gabriele Petrioli, Nov 23 '15 at 22:09
Hi Gaby. I dont see the complete image in the plunk that you pasted above. The image is being cropped out for some reason — takeradi, Nov 23 '15 at 22:10
Check my updated plunk below, you should see the full image as expected. — Brian FitzGerald, Nov 23 '15 at 22:17

Brian FitzGerald · Accepted Answer · 2015-11-23T22:19:34.437

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

edited Nov 23 '15 at 22:19

answered Nov 23 '15 at 22:00

Brian FitzGerald

2,773
3
21
33

thanks. yea it looked like it was an issue with the flex box. removing the height is a big deal for requirements that i have been given. but i guess i ll have to do with replacing that by a min height. thanks for your help. i am going to accept your answer. – takeradi Nov 23 '15 at 22:23
Good deal, glad it was helpful. – Brian FitzGerald Nov 23 '15 at 22:31

score 1 · Answer 2 · answered Nov 23 '15 at 22:21

1

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.

answered Nov 23 '15 at 22:21

AndreaM16

3,439
2
28
66

thanks AndreaM16. I was looking for what Brian mentioned above but its really cool to know this. thanks again! upvoted your answer. – takeradi Nov 23 '15 at 22:24
No problem, I just misunderstood your real question. Glad you found useful my solution. – AndreaM16 Nov 23 '15 at 22:25

Resize images to fit display:flex divs

2 Answers2

Linked