我有一些 html 和 css 可以做我想要的,但是带有 img 占位符..
我正在寻找使用 div 框的 css 重新创建这些 img 的效果..
<div class="item-box">{{ item.title }}</div> <!--with css for .item-box-->
这是 html:
<div class="row">
<div class="col-xs-6 col-sm-3 col-md-2">
<img src="http://placehold.it/200x200/336699" alt="">
</div>
...
<div class="col-xs-6 col-sm-3 col-md-2">
<img src="http://placehold.it/200x200" alt="">
</div>
</div>
还有CSS:
.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;
}
加上一个 fiddle (响应浏览器调整):http://jsfiddle.net/3hHC9/embedded/result/
最佳答案
目前你的图像存在于 div 中,据我所知你的问题还不清楚你想用 css 做这个
最好和最简单的方法是在 div background
中使用图像,这样它就可以充当占位符。您必须将 min-width 和 min-height 给 container ,以
确保它以图像作为占位符可见,即使它是空的或内容较少
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;
}
关于html - 用 div 框的等效 css 替换响应式 img 占位符?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22903436/