我正在制作一个网页,其中大量图片都在网格中呈现。我正在使用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>
答案 0 :(得分:0)
不能在没有参考尺寸的情况下完成。你可以试试这样的CSS:
.products img {
width: 100%;
height: auto;
max-height: 100rem;
}
但是你的肖像图像会缩小(看起来被压扁)。