Scale down image to fit into div, but never scale up

Question

I have several images with very varying dimensions. Some images may be as small as 50x100 and others as big as 4000x4000.

I want to show these images in their original size (never bigger), or scaled down to just fit inside the browser window.

Using the background image property I have gotten the images to always fit inside the browser, but I can't stop them from up-scaling if the browser is bigger than the image:

 <div class="slide-pane" style="background-image: url(<insert url to image here>);"></div>

.slide-pane {
    background-repeat: no-repeat;
    background-size:auto;
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    height: 80%;
    width: 80%;
}

I have found these Javascript/Jquery solutions:

But I'm hoping there are some CSS only solutions.

score 3 · Accepted Answer · edited Jan 29 '14 at 13:55

3

max-height:100%;
max-width:100%;
height:auto;

Apply that to an img not an elements background image. Background images don't have full browser support for max width height. You could use background-size set to 100% 100% but I'd recommend using an img for better css control and accessibility.

edited Jan 29 '14 at 13:55

NoobEditor

15,563
19
81
112

answered Jan 29 '14 at 13:53

S..

5,511
2
36
43

I also add `object-fit: contain` for some use cases – 1.21 gigawatts Apr 21 '23 at 00:56

score 1 · Answer 2 · answered Jan 29 '14 at 13:56

If they’re content images (and not there for style) then you’re better off using an <img> element in the page. If you do that then you can give it img { max-width: 100%; } in your CSS. This has the added benefit of working in IE8 (unlike background-size).

Scale down image to fit into div, but never scale up

2 Answers2