Resize Images With CSS – Keeping Aspect Ratio As It Is

I found a quick and easy way to rezise images with CSS by keeping your image’s aspect ratio. This is very quick you can use it in less than 5 minutes, lets proceed 😉

Lets say you want to show large images on your web page with maximum 200 pixels width, blog or forums just create the following css class into your styling css file:

.resize

{
width: 200px;
height : auto;
}

.resize

{
width: auto;
height : 300px;
}

Second class will resize the images by keeping height as 300 pixels. You can use the following classes in <IMG> tags like:

<img src="http://mywebsite.com/myphoto.jpg" class="resize" alt="my photo" />

The above solution is always better than putting width and height attributes into the <IMG> tag. Hope it works out for you too 😉

Anyways you can use any image re-size script with server side script technology like PHP. I am working on one of this kind of script which resize the images as you want. I will upload it with another article soon.

Update:

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.