我设计了一个'网格视图'来显示我网站上的项目。但是,由于它完全响应,因此图像不能是固定宽度。这就是我想要实现的目标。
或多或少,我试图制作图像,填充容器,但只有在不改变比例或拉伸的情况下,显然它必须检查图像的高度和宽度,它是原始尺寸但我不知道该怎么做,任何人都可以帮忙吗?
我提供的当前网格项的简单版本如下:
<div class="container">
<div class="item"><div class="overflow"><img src="/bla.jpg" /></div></div>
</div>
溢出位置具有固定的高度和宽度,仅根据屏幕大小而变化,并且会“剪切”图像。
香农
答案 0 :(得分:0)
我已经更新了小提琴。
重大变化
.gridItem .itemImage img {
width:auto;
/*min-width:100%;
min-height:100%*/
max-width:100%;
max-height:100%
}
希望这有帮助。