如何使用Flex在自适应布局中调整图像大小

Question

嗨，我尝试通过此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;
}

我喜欢flex功能，因此如果我调整窗口大小， .productsCard框的大小将动态调整大小 。 如果我具有固定（相同）的图像高度，则其外观为nic。

但是，如果我有不同的图片，例如（950x600、950x950、300x600）

在图像下创建了很多空白。 我尝试在这里演示：

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

我如何才能使高度图像变小，从而使框的高度被较小高度的图像所吸收？

Answer 1

如果我理解正确，则您希望.product-image img图像的高度类似于列表中最短出现的图像的高度。

最简单的方法就是设置图像的最大高度。 最大高度肯定会小于最短图像。

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

（此后，您可能需要将图像居中）。

这可以通过JavaScript动态完成：找到最短的图像，获取其高度，并将其作为max-height应用于所有其他图像。

Answer 2

如果您只想按上述方式通过css进行此操作，则必须为图像设置最大高度。 但是，如果您希望它随窗口高度变化，则可以按vh（视图高度）设置最大高度。

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

如果您希望它们与窗口的宽度有关：

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