How adapt size of image in responsive layout using flex

Question

Hi I trying do layout by this codepen :

http://codepen.io/levinmejia/pen/zrddrv

<section class="products">
    <div class="product-card">
        <div class="product-image">
            <img src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369">
        </div>
        <div class="product-info">
            <h5>Winter Jacket</h5>
            <h6>$99.99</h6>
        </div>
    </div>

    <div class="product-card">
        <div class="product-image">
            <img src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369">
        </div>
        <div class="product-info">
            <h5>Winter Jacket</h5>
            <h6>$99.99</h6>
        </div>
    </div>

    <div class="product-card">
        <div class="product-image">
            <img src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369">
        </div>
        <div class="product-info">
            <h5>Winter Jacket</h5>
            <h6>$99.99</h6>
        </div>
    </div>

    <div class="product-card">
        <div class="product-image">
            <img src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369">
        </div>
        <div class="product-info">
            <h5>Winter Jacket</h5>
            <h6>$99.99</h6>
        </div>
    </div>

    <div class="product-card">
        <div class="product-image">
            <img src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369">
        </div>
        <div class="product-info">
            <h5>Winter Jacket</h5>
            <h6>$99.99</h6>
        </div>
    </div>

    <div class="product-card">
        <div class="product-image">
            <img src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369">
        </div>
        <div class="product-info">
            <h5>Winter Jacket</h5>
            <h6>$99.99</h6>
        </div>
    </div>      
</section>

Css:

body {
    margin: 0 auto;
    width: 90%;
    max-width: 1240px;
    font-family: 'Roboto', sans-serif;
    background-color: #f6f6f6;
}



h1 {
    font-size: 28px;
    font-weight: 300;
    flex: 1;
}

h5 {
    font-weight: 500;
    line-height: 1.7em;
}

h6 {
    color: #666;
    font-size: 14px;
}


.product-filter {
    display: flex;
    padding: 30px 0;
}

.sort {
    display: flex;
    align-self: flex-end;
}

.collection-sort {
 display: flex;
    flex-direction: column;
}

.collection-sort:first-child {
    padding-right: 20px;
}

label {
    color: #666;
    font-size: 10px;
    font-weight: 500;
    line-height: 2em;
    text-transform: uppercase;
}

.products {
    display: flex;
    flex-wrap: wrap;
}

.product-card {
    display: flex;
    flex-direction: column;

    padding: 2%;
    flex: 1 16%;

    background-color: #FFF;
    box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.25);
}

.product-image img {
    width: 100%;
}

.product-info {
    margin-top: auto;
    padding-top: 20px;
    text-align: center;
}

I like function of flex , so if I resize window, the size of box of .productsCard is dynamic resizing . Its look nic if I have fix(same) height of image.

But if I have differents images for example ( 950x600, 950x950, 300x600 )

There is creating a lot of white space under images. I try demonstrate here:

http://codepen.io/anon/pen/KaRXYe

How can i achieve that too height image get smaller so the height of box is take by image with smaller height?

Answer 1

If I understood you right, you would like your .product-image img images to have a height similar to the height of the shortest appearing image in the list.

The simplest way to do this would be just setting a max-height to your images. A max-height that will for sure be less than the shortest image.

.product-image img {
  max-height:100px; // 100px as an example
}

(You'll perhaps want to center your images after this).

This could be done dynamically by JavaScript: find the shortest image, get its height, apply it as max-height to all other images.

Answer 2

If you want to do this by css only as previously said you must set a max height to your images. But if you want it changes by window height you can set your max height by vh (view height).

.product-image img {
   max-height:20vh; 
}

If you want they are related to width of window:

.product-image img {
   max-height:10vw; /*for example*/
}