Profile Image Styling - With No Image Stretch - CSS

Question

I am using simple css code for Profile Image Styling, but Image is stretched. How can i fix it?

Take a look at the Profile Images in this Picture:

enter image description here

Right Now I am Using this Code:

.Comment_Image_Size {
    height: 32px;
    width: 28px;
}

I also used this Code but in this case some Images are Bigger and some are smaller in height:

.Comment_Image_Size {
    width: 28px;
}

Mr. Alien · Accepted Answer · 2013-09-18T11:19:43.193

2

Don't fix the image dimensions, I think the project you are working on should be dynamic, if it's yes, than you can also resize the images via server side, if you don't want to do that, and want to stick with HTML and CSS, than use a wrapping element, say div, float it to the left, assign some fix height & width and assign a class, and than use the below snippet to

div.class_name img {
   max-width: 100%;
   max-height: 100%;
}

This way, your image will resize proportionally and it won't be stretched anymore

Demo (I've attached both examples, you can check out in the demo)

In the above demo, the first one is which I've suggested to you, other is one which you are probably doing, which is stretched, so go for max-height and max-width properties.

edited Sep 18 '13 at 11:19

answered Sep 18 '13 at 11:05

Mr. Alien

153,751
34
298
278

Cant see images in it – Hassan Sardar Sep 18 '13 at 11:14
You needed to open the image URL manually, then it was chached and got displayed. Otherwise it redirected to an HTML site. Now it works for me. – StrubT Sep 18 '13 at 11:18
The Image at bottom is stretched – Hassan Sardar Sep 18 '13 at 11:18
1

@Necromancer Yes, the upper one is what I suggested you, please read the answer properly :) and I've updated the link in my answer as well – Mr. Alien Sep 18 '13 at 11:19
@Mr.Alien Sorry my bad :( – Hassan Sardar Sep 18 '13 at 11:25

score 0 · Answer 2 · answered Sep 18 '13 at 11:07

0

best solutoin to give max-width and max-height to your class

.Comment_Image_Size {
    max-width:28px;
    max-height:32px;

}

answered Sep 18 '13 at 11:07

Love Trivedi

3,899
3
20
26

score 0 · Answer 3 · edited May 23 '17 at 12:01

The issue is that the original images are not the same aspect ratio. You need to specify the right height and width for each image to ensure that the maximum width/height is not exceeded (one will be less if not the right aspect ratio).

You may need to resize the images upon upload to have thumbnails that are the right size while preserving the aspect ratio How to resize images proportionally / keeping the aspect ratio?

Profile Image Styling - With No Image Stretch - CSS

3 Answers3