0

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/

StackThis
  • 883
  • 3
  • 15
  • 45

1 Answers1

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;  
        }
sanjeev
  • 4,405
  • 2
  • 19
  • 27
  • Very cool. Thanks! How would the div maintain square dimensions though? Same height as width.. Right now, the width is responsive to the column size (great!), but the height remains 100px.. – StackThis Apr 07 '14 at 04:50
  • refer to this question for perfect square div http://stackoverflow.com/questions/6693956/how-can-i-create-a-perfectly-square-div-where-height-is-equal-to-viewport – sanjeev Apr 07 '14 at 04:53