CODEWITHSUNDEEP
htmlcssimage
GeekedOut
GeekedOut

Reputation: 17185

3 same size images with same styling - one looks slightly different size

I have this page: http://www.problemio.com on which there are 3 images for POST/DISCUSS/SOLVE and the html for them looks like this:

         <div style="float: left; width: 70px; padding-left: 10px; padding-top: 10px;">
<img width="60px" height="60px"  src="http://www.problemio.com/img/ui/postbutton.png" style="border: none;" alt="Problemio" />
         </div>
         <div style="float: left; padding-left: 5px; padding-top: 5px;">
            <h2>POST</h2>
            <span style="color: gray;">problems</span>
         </div>

         <div style="float: left; width: 70px; padding-left: 50px; padding-top: 10px;">
<img width="60px" height="60px"  src="http://www.problemio.com/img/ui/discussbutton.png" style="border: none;" alt="Problemio" />
         </div>
         <div style="float: left; padding-left: 5px; padding-top: 5px;">
            <h2>DISCUSS</h2>
            <span style="color: gray;">brainstorm ideas<br /> with others</span>
         </div>         


         <div style="float: left; width: 70px; padding-left: 50px; padding-top: 10px;">
<img width="60px" height="60px"  src="http://www.problemio.com/img/ui/createbutton.png" style="border: none;" alt="Problemio" />
         </div>
         <div style="float: left; padding-left: 5px; padding-top: 5px;">
            <h2>SOLVE</h2>
            <span style="color: gray;">create new<br />
            solutions</span>
         </div>              

         <div style="clear:both;"></div>

But the 3rd image looks kind of stretched. Any idea why that might happen? The styling is identical for the images.

Thanks!

Upvotes: 0

Views: 120

Answers (3)

Doozer Blake
Doozer Blake

Reputation: 7797

All 3 of your original images have different ratios.

40x36 37x40 39x41

You are then trying to size them specifically with your CSS, and the browser is giving its best effort in resizing them. It can only do so much with what's it's given.

Other issues:

  • You are scaling them up in size which will most of the time, result in a fuzzy, bad looking image.
  • The images in question aren't aligned with one another in the center.

My suggestion would be to set all those source images to the same ratio, and make them higher resolution if you intend to make them larger.

Upvotes: 4

Vinit
Vinit

Reputation: 1825

It is like that because the dimensions of the third image is different than other two.

Upvotes: 1

david
david

Reputation: 4278

your image dimentions for createbutton.png are 40px × 36px and you have set the img's width to 60x60px so its streatching it

Upvotes: 1

Related Questions