使用CSS使这个主题适合浏览器窗口

Question

我正在尝试使用此主题创建网站 - http://ironsummitmedia.github.io/startbootstrap-4-col-portfolio/

它已经响应了，但是我不希望它们是链接的矩形框，而是取决于图像，根据用户浏览器窗口的大小，它将始终展开或收缩以适应浏览器窗口，每个之间约20px的边距，均匀分布。

不了解Javascript，但我想知道是否可以用CSS完成。

我想要的有点像Chris Coyier的例子 - https://css-tricks.com/examples/SeamlessResponsivePhotoGrid/，但需要在上面的主题预览中均匀分布和调整每个矩形。

感谢您的帮助！

哦，如果有人知道怎么用Wordpressify，那就太棒了！

Answer 1

根据它的外观，您提供的网站使用元视口标记。

<meta name="viewport" content="width=device-width, initial-scale=1" >

但是，只有当您的CSS尺寸为％而不是像素时，该标记才有效。 （包括字体大小）

Answer 2

它可以通过使用css3 calc（）来实现你可以动态地使用calc来改变你的图像父div的大小

改变你的

<div class="col-md-3 portfolio-item">

到<div class="asd">

并添加这样的风格

.asd{
    width: calc(80%/4);
    float:left;
    margin:2%;
}

Live Demo