Make holder.js same size as other bootstrap thumbnail images?

Question

I have a row where one has an image, but the other does not and uses holder.js as a placeholder.

<div class="row">
    <div class="col-md-3">
        <div class="thumbnail">
            <img src="image.jpg"/>
        </div>
    </div>
    <div class="col-md-3">
        <div class="thumbnail">
            <img src="holder.js/100%x100%"/>
        </div>
    </div>
</div>

My css for thumbnail is:

.thumbnail > img {
    width: 45%;
}

holder.js doesn't fit the image to bootstrap's thumbnail width and height. It's generating a 248x20 size placeholder image, which is way too small height. The width looks find though.

How do I make the placeholder images the same dimensions as the bootstrap thumbnail images?

Answer 1

It's likely you don't have an explicit height set on the .thumbnail class. Because of this, when Holder tries to get the height of the placeholder's parent, it gets an incorrect value. Set the height of .thumbnail and your code should work.

Answer 2

Specify height not in percentage <img src="holder.js/100%x75"> Official documentation