CSS: keep aspect ratio when rendering an image

Question

a simple CSS problem:

Display animal pictures in the grey box as shown in the picture below
Image size must be 150x150 px
However, I must maintain the aspect ration of the image, meaning not the whole of the image will fit into the 150x150 square.
Since most of the images will exceed the allowed 150x150 dimensions, i would like to focus the display on the middle of the image.

Some HTML:

<div class="gallery-item" style="height: 232px;">
                    <img src="/media/animals/images/african-buffalo.jpg" alt="African Buffalo ">

                    <div class="gallery-item-caption">
                        <a href="/animals/african-buffalo" title="African Buffalo ">African Buffalo </a>
                    </div>
</div>

Some CSS:

.gallery-item {
float: left;
padding: 15px 15px 15px 15px;
margin: 15px;
background-color: #ececec;
}

View:

enter image description here

So... Do you expect us to program it for you? You didn't even post a http://jsFiddle.net — Itay, Feb 23 '14 at 11:30
possible duplicate of [Resize and crop image with CSS](http://stackoverflow.com/questions/21966854/resize-and-crop-image-with-css) — web-tiki, Feb 23 '14 at 11:31
Agree with @MadaraUchiha, otherwise users would be forced to download full-sized images which is bad experience especially when the images are very large. — datasn.io, Feb 23 '14 at 11:34

Valentin · Accepted Answer · 2014-02-23T11:43:24.077

1

Instead of img you can set the background-image on divs. If you find that images don't fit well in a square (very wide images), you can change to background-size:cover. Idea taken from here, working example here

CSS

.gallery-item{
    width:50px;
    height:50px;
    border:solid 1px #000;
    margin:10px;
    background:url('http://lorempixel.com/100/200') center center no-repeat;
    background-size:100%;
}

edited Feb 23 '14 at 11:43

answered Feb 23 '14 at 11:37

Valentin

2,772
1
27
40

That's an interesting approach :) Will give it a shot – chuckfinley Feb 23 '14 at 11:40
1

You should use `background-size:cover;` instead of `background-size:100%;` otherwise it will only work for images that have a higher aspect ratio than the wanted image – web-tiki Feb 23 '14 at 11:44
1

I find the first answer from [this page](http://stackoverflow.com/questions/1341358/set-size-on-background-image-with-css) elaborates on this well. – datasn.io Feb 23 '14 at 11:45
1

@chadocat thanks for the info, changed the answer to reflect your suggestion – Valentin Feb 23 '14 at 11:46

CSS: keep aspect ratio when rendering an image

1 Answers1