Images - CSS, HTML

Question

Im trying to display images but I've got a couple of problems.

My images are different sizes and I was hoping to see whats the best way to avoid resolution issues and spacial problems with the layout.

You see I've got bigger/smaller images and I need them at 400 by 360px... Some get stretched and some get weird.(Try downsizing a big image into one small one)

What is the best way to handle images if you get them in different sizes but have a fixed space on the layout of your site?

I tried what the possible solution might be and it still streches...

 #divDisplayingImg img{
   width:500px;
height:360px;
border:solid medium white;
border-radius:5px;
border-width:8px;
background-size: cover;
overflow:hidden;
   }

Do you need them to all be the same size, or just view 400x360 px of them — Jacques ジャック, Oct 08 '13 at 16:04
This post maybe helpful to your issue: http://stackoverflow.com/questions/1733006/css-force-image-width-and-height-without-stretching — cassidymack, Oct 08 '13 at 16:07
It depends on how you're getting those images and how many of them you're working with. If the images are yours and you have a manageable amount, your best bet is to use photoshop, gimp, or some other image manipulation program and crop and scale as you see fit. I'm sure there's plenty of cropping tools on the internet... Here's one to get you started: http://www.fotor.com/ — Mr Jones, Oct 08 '13 at 16:19
@Jack you see I get images in different sizes, If I get a bigger Img I would like to add the image and display it. If the img is bigger than the 500 by 360 cut it. (If its possible to position the img so that which gets cut is anything of the image that you don't need. F.E: I add an image of a house, which takes a 1/4 of the image, I want to display the house but there's the sky and a big mountain. I just want 500 by 360px of the image to focus on the house, crop everything else. I hope I exlained myself haha — user1876553, Oct 08 '13 at 16:36
just set the containing div to the size you want, and set overflow to hidden. What happens if you want to see the part of the image that is the bottom left, or the top right, etc? You can't just have it centered in that case. — Jacques ジャック, Oct 08 '13 at 17:57

score 0 · Answer 1 · answered Oct 08 '13 at 16:06

0

I think you should use css property background-size
Example: background-size: cover;
will cover your 400px by 360px and crop the overflow.

answered Oct 08 '13 at 16:06

Simon Arnold

15,849
7
67
85

I tried your solution, didn't work. Img's still streching. – user1876553 Oct 08 '13 at 16:42
If you don't want it to stretch, use background-size: contain; instead. – Simon Arnold Oct 08 '13 at 17:30

score 0 · Answer 2 · answered Oct 08 '13 at 17:30

0

Try this

#divDisplayingImg
{
 width:500px;
 height:360px;        
 overflow:hidden;
}

#divDisplayingImg img
{
 width:100%;
 border:solid medium white;
 border-radius:5px;
 border-width:8px;
 background-size: cover;
 overflow:hidden;
}

answered Oct 08 '13 at 17:30

NikeshPathania

217
2
5

score 0 · Accepted Answer · answered Oct 08 '13 at 18:11

I'm not quite sure of what you call "images get streched and weird." If you have original images in different ratios, then, in order to prevent distortion, you should use

max-width: 450px; max-height:360px;

It will preserve the original ratio and help to avoid possible distortions.

Images - CSS, HTML

3 Answers3