CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Apprentice Programmer
Apprentice Programmer

Reputation: 1515

How to set size of image to match bootstrap thumbnail?

As you can see, the right image is not fitted properly into my thumbnail

enter image description here

Whats weird is that both images are the exact same resolution (apparently from google images)

 <div class="jumbotron">
   <div class "container">
    <h1>In Your Shoes:<br> Make Connections Anonymously<br> </h1>
     <h2>
      <div class="row">
        <div class="col-xs-4 col-md-4 col-lg-4">
          <a href="#" class="thumbnail">
            <%= image_tag("blank_avatar_male.jpg") %>
          </a>
         </div> 
          <div class="col-xs-4 col-md-4 col-lg-4">
           <a href="#" class="thumbnail">
             <%= image_tag("img_thing.jpeg") %>
           <a/>
          </div>
          <div class="col-xs-4 col-md-4 col-lg-4">
           <a href="#" class="thumbnail">
           <%= image_tag("blank_avatar_female.jpg") %>
           </a>
          </div>
         </div> 
      </h2>

I know the html code doesnt look pretty, as I'm doing this myself. I'm open to suggestions on how to improve it! Thanks

Upvotes: 0

Views: 3192

Answers (2)

St&#233;phane de Luca
St&#233;phane de Luca

Reputation: 13563

Use percent decryption for sizes, as follows:

.thumbnail img {
    width:100%;
    height:100%;
}

Note that this won't respect the orignal image aspect ratio (it'll be stretched depending if either of the condition is not met: container.width/image.width==1 && container.height/image.height==1

You can do the following though to fix that: center the image horizontally while matching the height:

.thumbnail img {
    text-align: center;
    height:100%;
}

But then, you might probably see a seam on both side of the image, depending on colors.

Upvotes: 2

Travis
Travis

Reputation: 2245

With out knowing the size of the images this is hard but this might help 

 .thumbnail img {width:100px;height:100px}

just replace the 100px with the correct dimensions. that should make it uniform.

Upvotes: 1

Related Questions