Question

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!

Answer 1

All 3 of your original images have different ratios.

40×36
37×40
39×41

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.