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
at

2 comments:

  1. AnonymousFebruary 23, 2013 at 5:23 PM

    Excellent solution when the image is placed in a single row and text is bellow image not next to it

    ReplyDelete
  2. AnonymousFebruary 23, 2013 at 5:26 PM

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

    ReplyDelete