Question

您好我尝试通过此 codepen 进行布局：

<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框的大小为动态调整大小。如果我有固定（相同）的图像高度，它看起来很神奇。

但如果我有不同的图像例如（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动态完成：找到最短的图像，获取其高度，将其作为最大高度应用于所有其他图像。

Answer 2

如果您只想按照之前的说法通过css执行此操作，则必须为图像设置最大高度。但如果您希望它按窗口高度更改，您可以将最大高度设置为vh（视图高度）。

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

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

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

如何使用flex

2 个答案: