CSS scale down image to fit in containing div, without specifing original size

Question

I want to have a website where I can upload images of different sizes to be displayed in a jquery slider. I can't seem to fit (scaling down) the image in a containing div. Here's how I'm intending to do it

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org    /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title> 
<link rel="stylesheet" type="text/css" href="Imtest.css"/>
</head>

<body>

<div id="wrapper"> 

<div id="im"><img src="Images/Scarpa2_1.jpg" /></div>

</div>  
</body>
</html>

And the CSS

#wrapper {
    width: 400px;
    height: 400px;
    border: 2px black solid;
    margin: auto;
}

#im {
    max-width: 100%;
}

I've tried to set the max-width of my image to 100% in CSS. But that doens't work.

try #im img{ display:block; height:100%; width:100%;} but small images may looks bad..! — Vivek Vikranth, Sep 04 '13 at 06:14
Strangely that you say that setting `max-width` of the image to 100% doesn't help. [It works perfectly](http://jsfiddle.net/h6732/). — user, Mar 19 '14 at 10:22
possible duplicate of [Image auto resize to fit div container](http://stackoverflow.com/questions/3029422/image-auto-resize-to-fit-div-container) — user, Mar 19 '14 at 10:25

score 62 · Accepted Answer · answered Sep 04 '13 at 06:38

You can use a background image to accomplish this;

From MDN - Background Size: Contain:

This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.

Demo

CSS:

#im {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("path/to/img");
    background-repeat: no-repeat;
    background-size: contain;
}

HTML:

<div id="wrapper">
    <div id="im">
    </div>
</div>

Problem: background-image will not be SEO friendly. – netalex May 25 '16 at 10:37 — netalex, May 25 '16 at 10:37

score 19 · Answer 2 · edited Apr 30 '20 at 21:08

19

This is an old question I know, but this is in the top five for several related Google searches. Here's the CSS-only solution without changing the images to background images:

width: auto;
height: auto;
max-width: MaxSize;
max-height: MaxSize;

"MaxSize" is a placeholder for whatever max-width and max-height you want to use, in pixels or percentage. auto will increase (or decrease) the width and height to occupy the space you specify with MaxSize. It will override any defaults for images you or the viewer's browser might have for images. I've found it's especially important on Android's Firefox. Pixels or percentages work for max size. With both the height and width set to auto, the aspect ratio of the original image will be retained.

If you want to fill the space entirely and don't mind the image being larger than its original size, change the two max-widths to min-width: 100% - this will make them completely occupy their space and maintain aspect ratio. You can see an example of this with a Twitter profile's background image.

edited Apr 30 '20 at 21:08

CarenRose

1,266
1
12
24

answered Jun 07 '15 at 22:34

Woody Payne

595
4
15

1

What's the support like for `MaxSize`? – crmpicco Jun 22 '15 at 09:29
1

That's just a placeholder for whatever max-width and max-height you want to use, in pixels or percentage (providing a width and height is set on the parent.) – Woody Payne Jun 30 '15 at 21:44
Care to expand what's not working in particular? It's hard to troubleshoot "that doesn't work" :) – Woody Payne Jan 06 '16 at 10:47
@WoodyPayne Where do you put these lines? Inside a `div` object or do you have to access the `custom.css` file? – FaCoffee May 18 '17 at 09:07
Please add that you set this to the `img` itself, not to its container. – Sz. May 08 '20 at 15:21

score 8 · Answer 3 · answered Jan 10 '14 at 09:24

8

if you want both width and the height you can try

 background-size: cover !important;

but this wont distort the image but fill the div.

answered Jan 10 '14 at 09:24

Chathuranga

1,008
1
15
26

Josh Werner · Answer 4 · 2017-07-02T10:35:34.233

5

I believe this is the best way of doing it, I've tried it and it works very well.

#img {
  object-fit: cover;
}

This is where I found it. Good luck!

edited Jul 02 '17 at 10:35

answered Nov 21 '16 at 20:38

Josh Werner

51
1
2

Currently poor browser support. Otherwise this would be the best solution. – CrazyTim Jul 02 '17 at 09:52

score 3 · Answer 5 · answered Sep 04 '13 at 06:19

3

It's very simple. Just Set width of img to 100%

answered Sep 04 '13 at 06:19

Nikhil Rathod

103
2

This will not work for images with aspect ratio less than 1. – psiyumm Aug 18 '15 at 05:37
This also scales up the images if the div container is larger than the image – Mike N Jan 22 '16 at 12:43

score 2 · Answer 6 · answered Mar 13 '18 at 13:02

Hope this will answer the age old problem (Without using CSS background property)

Html

<div class="card-cont">
 <img src="demo.png" />
</div>

Css

.card-cont{
  width:100%;
  height:150px;
}

.card-cont img{
  max-width: 100%;
  min-width: 100%;
  min-height: 150px;
}

score 1 · Answer 7 · answered Sep 03 '17 at 13:55

1

I am using this, both smaller and large images:

.product p.image {
text-align: center;
width: 220px;
height: 160px;
overflow: hidden;
}
.product p.image img{
max-width: 100%;
max-height: 100%;
}

answered Sep 03 '17 at 13:55

Flavio

41
4

Bikas Lin · Answer 8 · 2022-06-21T00:58:59.310

1

I have met the same issue and fixed using the following CSS. Hope this would help you.

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

.parent {
  border: 1px solid black;
  width: 200px;
  height: 100px;
}
.image {
  max-width: 100%;
  max-height: 100%;
  width: max-content;
  height: max-content;
  border: 1px solid black;
}

<div class='parent'>
  <img class='image' alt='' src="https://avatars.githubusercontent.com/u/95250818?v=4"></img>
</div>

edited Jun 21 '22 at 00:58

answered Jun 20 '22 at 14:36

Bikas Lin

689
5
16

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Ethan Jun 20 '22 at 23:49

score 0 · Answer 9 · answered May 12 '15 at 07:52

0

I use:

object-fit: cover;
-o-object-fit: cover;

to place images in a container with a fixed height and width, this also works great for my sliders. It will however cut of parts of the image depending on it's.

answered May 12 '15 at 07:52

Stefan Bogaard

116
5

Have no idea why it had been voted down. It's the option ever! – Alex Shwarc Jan 13 '18 at 10:07

score 0 · Answer 10 · edited Feb 06 '16 at 09:54

0

In a webpage where I wanted a in image to scale with browser size change and remain at the top, next to a fixed div, all I had to do was use a single CSS line: overflow:hidden; and it did the trick. The image scales perfectly.

What is especially nice is that this is pure css and will work even if Javascript is turned off.

CSS:

#ImageContainerDiv {
  overflow: hidden;
}

HTML:

<div id="ImageContainerDiv">
  <a href="URL goes here" target="_blank">
    <img src="MapName.png" alt="Click to load map" />
  </a>
</div>

edited Feb 06 '16 at 09:54

Igor Ivancha

3,413
4
30
39

answered May 14 '15 at 02:37

3

For large images, it will cut / hide the extra instead of shrink. – MichaelZ Aug 06 '15 at 20:30

score 0 · Answer 11 · answered Oct 27 '17 at 18:37

Several of these things did not work for me... however, this did. Might help someone else in the future. Here is the CSS:

    .img-area {
     display: block;
     padding: 0px 0 0 0px;
     text-indent: 0;
     width: 100%;
     background-size: 100% 95%;
     background-repeat: no-repeat;
     background-image: url("https://yourimage.png");

    }

CSS scale down image to fit in containing div, without specifing original size

11 Answers11

Linked