Javascript 由4幅图像组成的响应网格

我试图复制eBay的“今日”特色卖家布局，其中4个方形图片组成一个盒子（见图），但使用的是引导。我真的很难理解我是如何做到这一点的。我可以得到或多或少均匀的正方形，并且在lg、md和sm规则上看起来很好，因为当然事情不需要按比例分布，我可以只给每个正方形一个固定的宽度和高度。然而，当涉及到移动设备时，这就不存在了，因为它当然需要根据窗口大小调整大小

我现在想到的html基本上是一个网格，分为9和3（col-xs-9和col-xs-3），每个桌面/平板电脑的宽度都有设定的高度

图像有时是方形图像，有时是横向或纵向格式的图像，在这种情况下，它们将保持纵横比并扩展到最大尺寸，但在包含div的范围内

是否有一种方法可以使用引导实现这一点，或者我是否需要使用javascript等替代方法

下面的代码，以防您需要查看：

HTML

---

请帮帮我。这让我发疯了：（.谢谢！

你能用

弹性箱

布局做点什么吗

.cols{溢出：隐藏；}
.cols.col{float:左；宽度：25%；}
.cols.col:第一个子项{宽度：75%；}
.cols.colimg{宽度：100%；}
.柔性容器{
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit柔性方向：列；
-ms-flex方向：列；
弯曲方向：立柱；
-webkit柔性包装：nowrap；
-ms-flex-wrap:nowrap；
柔性包装：nowrap；
-webkit内容：flex start；
-ms-flex-pack：启动；
调整内容：灵活启动；
-webkit对齐内容：拉伸；
-ms柔性线包装：弹性；
对齐内容：拉伸；
-webkit对齐项：flex开始；
-ms-flex-align：开始；
调整项目：灵活启动；
}
.弹性项目{
-网络工具包订单：0；
-ms弹性订单：0；
顺序：0；
-webkit flex:10自动；
-ms-flex:10自动；
弹性：10自动；
-webkit自动对齐：自动；
-ms flex项目对齐：自动；
自对准：自动；
}

---

如果您的图像是各种尺寸的，那么您需要使用背景大小设置为覆盖的背景图像

.flex-item
  background-size cover
  background-image url(http://placehold.it/350x350)

或者你需要使用，这是可怕的，但在IE中有可怕的支持

.flex-item img
  object-fit cover

---

谢谢大家的回答

我设法实现这一点的方法是完全取消对网格使用引导。我改为围绕百分比构建网格。我在网上读到一些文章，其中谈到如何提供百分比作为padding top的值，基本上可以为您提供一个具有特定纵横比的容器。例如，如果您想要一个将纵横比保持为4:3的div，您要做的是添加

padding-top:75%; 

在此div的样式表中

只要div有一个给定的宽度，就可以使用padding top percentage技巧提供它的高度

`padding-top:100%;`

对于网格中的大图像，css（手写笔）如下所示：

.big-image {
        width: 75%;
        /* whatever width you want */
        display: inline-block;
        position: relative;
        float:left;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
        font-size:0px;

        &:after {
            padding-top: 100%;
            /* 16:9 ratio */
            display: block;
            content: '';
        }
}

当然，正如您在下面看到的，div需要相对定位，填充需要添加到：after css选择器中

---

我希望这对某人有所帮助。谢谢

嵌套CSS无效CSS是SASS（）还是更少（）？抱歉，这是触控笔，但它与LESS和SASS非常相似。谢谢你的回答。这里的问题是图像并不总是方形的。希望它们是方形的，但如果不是，我需要将它们居中并水平对齐，因此我可能需要使用display:table和display:table cell css规则s、 我基本上需要大的正方形和3个小的正方形div保持为正方形，并按比例缩小大小，无论图像本身的大小和纵横比如何。

`padding-top:100%;`

.big-image {
        width: 75%;
        /* whatever width you want */
        display: inline-block;
        position: relative;
        float:left;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
        font-size:0px;

        &:after {
            padding-top: 100%;
            /* 16:9 ratio */
            display: block;
            content: '';
        }
}