Replace responsive img placeholders with equivalent css for div boxes? - html

Question

I have some html and css that does what I want, but with img placeholders..
Am looking to recreate the effect of these img with css for div boxes..
<div class="item-box">{{ item.title }}</div> <!--with css for .item-box-->
Here's the 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>
And the 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;
}
Plus a fiddle (responsive on browser adjustment): http://jsfiddle.net/3hHC9/embedded/result/

Answer 1

Currently your image is present inside the div , Your question is not clear as far as i understood you want to do this with css
the best and easy way would be to use the image in div background so that it act as placeholder. You have to give min-width and min-height to container , to
ensure that it is visible with the image as placeholder even if it is empty or have less content
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;
}