Question

I am using KnockoutJS and Bootstrap in ASP.NET MVC4 to display image thumbnails. The problem I have is the images, as one would expect, are different sizes. So, setting span3 on the li element deals with the width issue, but then the height is not equal for all thumbs, so I tried setting that on the img tag.. however, this does not work and when I remove the span3 on the li and add width to the img tag, then I see the width is also not being honored. This is very strange beheaviour. Does anyone have any ideas?

Here’s my markup:

<ul class="thumbnails" data-bind="foreach: images">
                <li class="span3">
                    <div class="thumbnail">
                        <img data-bind="attr: { src: thumbnailUrl, alt: caption }" height="130px" />
                        <p data-bind="html: caption"></p>
                    </div>
                </li>
            </ul>

Answer 1

CSS height overrides HTML height attribute. If you want a fixed height for your img try this CSS:

.your-img-selector {
    height: 130px;
}