How can I position an image in a box such that it fits exaclty in width or heigth, whichever is smaller?

Question

I want to load some photos from a server and display each of them in an own box such that the box is filled and the image centered (not stretched), if it is to big. Can I achieve this for example with CSS without knowing the size of each image? Maybe with max-width or so?

Here is an example of what I want:

An example.

Are you spitting it out in html or do you have something server side processing it? — David Nguyen, Apr 10 '12 at 18:30

Jason Gennaro · Accepted Answer · 2012-04-10T18:25:43.657

You could use the CSS3 background-size property.

Specifically, you would use either background-size:contain or background-size:cover.

From the spec:

Values have the following meanings:

‘contain’

Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.

‘cover’

Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.

Source: http://www.w3.org/TR/css3-background/#the-background-size

Which one you used would depend on the aspect ratio of the original images you are using.

Scroll down on this resource to see some examples: http://www.css3.info/preview/background-size/

Perfect. Exactly what I wanted! Thanks a lot! – AME Apr 10 '12 at 20:08 — AME, Apr 10 '12 at 20:08

score 0 · Answer 2 · answered Apr 10 '12 at 18:18

0

The quickest thing that you can do is to put the image as a background image that is centered:

style="background: url(images/42.png) 50% 50% no-repeat"

Images smaller than the box will be centered in the box. Images that are larger will experience cropping.

The downside is, there is no scaling.

For scaling, you would have to know the dimensions, employ some math to calculate a scaling amount that will preserve the aspect ratio and use an actual element that is inside a cropping container that uses "overflow: hidden".

answered Apr 10 '12 at 18:18

Ates Goral

137,716
26
137
190

1

This will not scale the image at all, which is what he is trying to do. – idrumgood Apr 10 '12 at 18:19
Wouldn't that cutoff part of the image? I think the OP wants to scale it. – j08691 Apr 10 '12 at 18:19
Yes, this answer is self-professed as a "quick solution". I later added clarification that it doesn't do scaling. – Ates Goral Apr 10 '12 at 18:21

score 0 · Answer 3 · answered Apr 10 '12 at 19:03

Here what you do. If for instance the image is inside a DIV with an ID called "boxer" You'll now create a CSS that will automatically re-size every image that's inside the DIV with the ID "boxer" The CSS will look like this

#boxer img {
 Width: 600px
 Height: 600px;
}

The above CSS will automatically re-size whatever image you put inside to the specifications in the CSS. This will fit the box with the ID "boxer" precisely if the dimensions corresponds to that of the CSS. You could just do 100% for both the width and the height, that way it fits the box.

This would stretch the image and destroy its proportions – AME Apr 13 '12 at 13:29 — AME, Apr 13 '12 at 13:29

How can I position an image in a box such that it fits exaclty in width or heigth, whichever is smaller?

3 Answers3