CODEWITHSUNDEEP
twitter-bootstrap
Dev
Dev

Reputation: 1561

How to make height of image same as width in fluid layout for bootstrap

I am writing a web application using the fluid layout for twitter bootstrap. My code looks like below.

  <div class="row-fluid">
    <div class="offset1 span10">
        <div class="row-fluid">
            <div class="span4 border-line">
                        <div class="row-fluid">
                            <h4 class="text-center"><a href="/category">name_of_item</a></h4>
                             <a target="_blank" href="link_for_item">
                                <img class="item-size" src="photo.url"/>
                            </a>
                            <p> quick_summary|safe </p>
                        </div>
            </div>
            <div class="span4 border-line">
                        <div class="row-fluid">
                            <h4 class="text-center"><a href="/category">name_of_item</a></h4>
                             <a target="_blank" href="link_for_item">
                                <img class="item-size" src="photo.url"/>
                            </a>
                            <p>quick_summary</p>
                        </div>
            </div>
        </div>
    </div>
</div>

And in my css looks like below for item-size

 .item-size{
      width: 100%;
      height: 50%;
  }

In the above example everything is working fine except the height for the image item. Image width is changing whenever i change to different value (example: 60%), but the height value is not having any effect on the size. I have tried wrapping the element with div class of .item-size and even that did not have any effect. Can anyone help me how i can set the height value which will have effect on the height of the image ?

Thanks

Upvotes: 0

Views: 5542

Answers (1)

Jo&#227;o Rafael
Jo&#227;o Rafael

Reputation: 413

You can't specify the height by percentage, unless you had set a height for the tag which is wrapping the img. So you have to set the height in pixels. ex.:

.item-size{
  width: 100%;
  height: 200px;
}

if you still want to use % you have to set a height for a wrapper div.

Upvotes: 4

Related Questions