替换响应img占位符与div盒的等效css?

时间:2014-04-07 04:07:37

标签: html css html5 css3 responsive-design

我有一些html和css可以做我想要的,但是使用img占位符..

我希望用css为div盒重新创建这些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;
}

另外一个小提琴(响应浏览器调整):http://jsfiddle.net/3hHC9/embedded/result/

1 个答案:

答案 0 :(得分:1)

目前你的图像存在于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;  
        }