基础网格概述块大小相等

时间:2013-12-24 11:45:01

标签: image grid zurb-foundation

我正在制作一个网页,其中大量图片都在网格中呈现。我正在使用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>

1 个答案:

答案 0 :(得分:0)

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

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

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