Html 将响应img占位符替换为div框的等效css？

我有一些html和css做我想要的，但是有img占位符

我想用css为div框重新创建这些img的效果

<div class="item-box">{{ item.title }}</div> <!--with css for .item-box-->

---

加上一把小提琴（在浏览器调整时做出响应）：

目前，您的图像显示在div中，据我所知，您的问题不清楚。您希望使用css来实现这一点

最好且简单的方法是在div

background

中使用图像，使其充当占位符。您必须为容器指定最小宽度和最小高度

确保它以图像作为占位符可见，即使它是空的或内容较少

        div{
           background-image: url("http://placehold.it/200x200");
           background-size: cover;
            min-height: 100px;  // need to specify min-height and min-width
            min-width: 100px;  
        }

---

很酷。谢谢但是div如何保持正方形尺寸？高度与宽度相同。。现在，宽度响应于列大小（很好！），但高度保持在100px。请参考此问题以获得完美的方形div

.row {
    margin: 0;
}
img {
    width: 100%;
}
.col-xs-6 {
    padding: 1.5%;
    margin: 0;;
}
.col-sm-3 {
    padding: 1.5%;
    margin: 0;
}
.col-md-2 {
    padding: 1.5%;
    margin: 0;
}

        div{
           background-image: url("http://placehold.it/200x200");
           background-size: cover;
            min-height: 100px;  // need to specify min-height and min-width
            min-width: 100px;  
        }