Tuesday, April 12, 2011

Resize image without distorting it

Has anyone come across a problem where image is being distorted on a webpage?

Here is the simple CSS solution to display images without distorted.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <style type="text/css">
    .imgresize {
      width: 100px;
      height: 150px;
    }
    .imgresize img {
      width: 100px; // to fix images by width, or
      // height: 150px; // to fix images by height
    }
  </style>
</head>
<body>
  <form id="form1" runat="server">
  
<div>
    <div id="imgdiv" class="imgresize">
      <img alt="" src="images/image01.gif" />
    </div>
  </div>
  </form>
</body>
</html>


Note: You need to remove the height and width attribute value from img tag itself.

Reference link http://forums.asp.net/p/1514562/3619288.aspx

1 comments:

Anonymous said...

Excellent solution when the image is in one row and text is in next row

 

Get paid for your opinions! Click on the banner above to join Planet Pulse. Its totally free to sign up, and you can earn UNLIMITED. Find out more by visiting PLANET PULSE.
July Code Blog Copyright © 2010 Blogger Template Designed by Bie Blogger Template