Skip to content
Home » Web » CSS » How to Limit Image Size Proportionally by CSS

How to Limit Image Size Proportionally by CSS

How to resize the images to the limitation of your web page? Suppose the class of your image is "thumbnail", and the limitation is WIDTH, here is a cure with the following CSS properties:

...
img.thumbnail {
  max-width: 64px;
  height: auto;

  vertical-align: middle;
}
...

In most cases, the limitation of images will be within the horizontal space, if the limitation is height, then switch the places of the two. Please note that, the above CSS properties will not enlarge the images that smaller than 64px in width.

...
img.thumbnail {
  max-height: 64px;
  width: auto;

  vertical-align: middle;
}
...

Leave a Reply

Your email address will not be published. Required fields are marked *