基础网格概述块大小相等

Question

我正在制作一个网页，其中大量图片都在网格中呈现。我正在使用Foundation网格。我有三种尺寸：风景，肖像和方形。在设计中，横向和纵向块的大小完全相同（仅为90度）。这就是问题开始的地方..

我宁愿不使用像素来设置我的图像尺寸，所以有没有一种干净的方法可以使“横向”和“纵向”的尺寸相同而不使用像素？

这是我的HTML：

<div class="products">
    <div class="product landscape medium-12 large-8 xlarge-6  columns overview">
        <img src="img/mes_liggend.jpg">
        <h4>Title</h4>
        <p>Subtitle is longer</p>
    </div>
    <div class="product portrait medium-12 large-8 xlarge-6 columns overview">
        <img src="img/mes_staand2.jpg">
        <h4>Title</h4>
        <p>Subtitle is longer</p>
    </div>
    <div class="product square medium-12 large-8  xlarge-6 columns overview">
        <img src="img/gude5.jpg">
        <h4>Title</h4>
        <p>Subtitle is longer</p>
    </div>

Answer 1

不能在没有参考尺寸的情况下完成。你可以试试这样的CSS：

.products img {
    width: 100%;
    height: auto;
    max-height: 100rem;
}

但是你的肖像图像会缩小（看起来被压扁）。