CSS: 100% width or height while keeping aspect ratio?

Question

Currently, with STYLE, I can use width: 100% and auto on the height (or vice versa), but I still can't constrain the image into a specific position, either being too wide or too tall, respectively.

Any ideas?

can you post a link or screenshot to show an example of the issue? — Mauro, Sep 20 '10 at 12:48

score 156 · Accepted Answer · edited Mar 08 '16 at 19:16

156

If you only define one dimension on an image the image aspect ratio will always be preserved.

Is the issue that the image is bigger/taller than you prefer?

You could put it inside a DIV that is set to the maximum height/width that you want for the image, and then set overflow:hidden. That would crop anything beyond what you want.

If an image is 100% wide and height:auto and you think it's too tall, that is specifically because the aspect ratio is preserved. You'll need to crop, or to change the aspect ratio.

Please provide some more information about what you're specifically trying to accomplish and I'll try to help more!

--- EDIT BASED ON FEEDBACK ---

Are you familiar with the max-width and max-height properties? You could always set those instead. If you don't set any minimum and you set a max height and width then your image will not be distorted (aspect ratio will be preserved) and it will not be any larger than whichever dimension is longest and hits its max.

edited Mar 08 '16 at 19:16

Roy

7,811
4
24
47

answered Sep 20 '10 at 13:20

Andrew

42,517
51
181
281

20

if the image is taller than it is wide, I would use height=100% and width=auto, if the image is wider than it is tall, I would use width=100%, height=auto. i simply never know what the case is? cropping by max height/width would work- but if there's a way not to- i'd rather use that... – Weston Watson Sep 20 '10 at 16:15
2

Well, are you designing a fluid or fixed-width layout? If you're in a fixed-width layout you can always set your width to 100% and the image will scale appropriately, but it may be very tall. Are you trying to position an image in a block of text, or use it as a banner, or as a background? If you could show the page where you're planning to use it or describe the context I could help you more. See edits above as well. – Andrew Sep 21 '10 at 01:20
1

using max-height on my img allowed me to constrain images while keeping their aspect ratio – northamerican Jul 17 '14 at 14:11
4

`object-fit` no use? – Lee Goddard Sep 26 '18 at 06:37
object-fit may crop image and hide details – Mustkeem K Dec 12 '21 at 06:38

score 87 · Answer 2 · answered Jun 27 '13 at 21:47

87

Some years later, looking for the same requirement, I found a CSS option using background-size.

It is supposed to work in modern browsers (IE9+).

<div id="container" style="background-image:url(myimage.png)">
</div>

And the style:

#container
{
  width:  100px; /*or 70%, or what you want*/
  height: 200px; /*or 70%, or what you want*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

The reference: http://www.w3schools.com/cssref/css3_pr_background-size.asp

And the demo: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size

answered Jun 27 '13 at 21:47

conca

1,394
9
10

3

the ideal solution, which sadly isn't supported by IE8 :( – japrescott Jun 19 '14 at 08:27
This is the ideal solution, but if you do this in carousels, it causes the images to be blank for a second after each slide. – kloddant Jun 06 '17 at 19:24
This was the best solution for me. Our stack: react + material UI – Davis Jones Oct 02 '20 at 16:26
2

Switching from an `img` to CSS `background-image` worked for me but I used `contain`, not `cover` for `background-size` — otherwise I lost some of the image. – texelate Oct 08 '20 at 07:39
This won't distort the image at all, but you'll still need to explicitly set a width and height on the div element. The image keeps its aspect ratio, but the element itself won't – Alex Rummel May 26 '21 at 14:05

score 68 · Answer 3 · edited Mar 26 '16 at 01:22

68

Simple elegant working solution:

img {
  width: 600px;  /*width of parent container*/
  height: 350px; /*height of parent container*/
  object-fit: contain;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

edited Mar 26 '16 at 01:22

Evan Carslake

2,267
15
38
56

answered Mar 26 '16 at 00:35

user3334941

739
6
2

7

Thanks for reminding me about `object-fit`. Exactly what I needed. – Ash Clarke Dec 01 '16 at 16:33
5

This is an ideal solution, but unfortunately `object-fit` is not supported in any versions of IE nor Edge as of March 28th, 2017. – Simon G Mar 28 '17 at 19:02
2

As of March 2019 this feature has 90% support - so this really should be considered the correct answer. – Hampus Ahlgren Mar 04 '19 at 10:15
1

Also, notice that `object-fit: contain` and `object-fit: cover` dont like `width` like 100% - you should use concrete units like `px` – FlameStorm Aug 02 '19 at 23:27
1

I tried `object-fit` with `max-width` and `max-height` as used in other answers, but that didn't work. this works perfectly for random image sizes even with `width` and `height 100%` – Halfacht Jan 02 '20 at 16:53
Note: `object-fit` will affect negatively scroll behavior. use `background-size: cover` instead – Liam Apr 29 '21 at 18:45
This works great! I have a range of vertical and horizontal images that are all slightly different sizes and this works really well. – Jacob Broughton Oct 18 '21 at 12:50

Adam Waite · Answer 4 · 2014-09-02T21:10:55.843

66

By setting the CSS max-width property to 100%, an image will fill the width of it's parenting element, but won’t render larger than it's actual size, thus preserving resolution.

Setting the height property to auto maintains the aspect ratio of the image, using this technique allows static height to be overridden and enables the image to flex proportionally in all directions.

img {
    max-width: 100%;
    height: auto;      
}

edited Sep 02 '14 at 21:10

answered Jan 15 '13 at 17:33

Adam Waite

19,175
22
126
148

1

yet setting `height` to `auto` causes reflow when image is floated – Gregory Pakosz Mar 15 '13 at 12:05
1

the problem is when in a screen mobile, is not full height – Alberto Acuña Nov 24 '21 at 20:05

score 31 · Answer 5 · answered Sep 26 '14 at 18:09

31

Had the same issue. The problem for me was that the height property was also already defined elsewhere, fixed it like this:

.img{
    max-width: 100%;
    max-height: 100%;
    height: inherit !important;
}

answered Sep 26 '14 at 18:09

Adam

6,041
36
120
208

Exactly what I was looking for. Thanks a million dude. – London Smith Aug 18 '18 at 11:16
Perfect where image size can be smaller or larger than the parent div, and it will be resized into perfect center with maximum width OR maximum height. You do not have to use image as a background which will just overfill the parent if set to "cover". – Rehmat Oct 05 '18 at 08:00

score 12 · Answer 6 · answered Jan 11 '16 at 23:47

12

Simple solution:

min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
margin: 0;
padding: 0;

By the way, if you want to center it in a parent div container, you can add those css properties:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

It should really work as expected :)

answered Jan 11 '16 at 23:47

Alexis Kinsella

398
4
6

upvoted the first part. second part did not work for me... :( – Vikas Bansal Mar 19 '17 at 08:52
1

Just one problem - if the image is larger than 100% of the container, it will spill out and will require scrollbars or cropping. Not sure, how to achieve the same and still limit the max size to the container. If setting max-width and height, it does not preserve aspect ratio anymore. – JustAMartin Oct 20 '17 at 11:30
1

@JustAMartin I was having the same issue, container is small and fixed size. Width or height 100% messed with aspect ratio. Solution was to use object-fit: contain, but that doesn't work in IE11 only Edge as of 2020. – DavGarcia Jul 30 '20 at 18:32

score 5 · Answer 7 · answered May 10 '15 at 20:58

One of the answers includes the background-size: contain css statement which I like a lot because it is straightforward statement of what you want to do and the browser just does it.

Unfortunately sooner or later you are going to need to apply a shadow which unfortunately will not play well with background image solutions.

So let's say that you have a container which is responsive but it has well defined boundaries for min and max width and height.

.photo {
  max-width: 150px;
  min-width: 75px;
  max-height: 150px;
  min-height: 75px;
}

And the container has an img which must be aware of the pixels of the height of the container in order to avoid getting a very high image which overflows or is cropped.

The img should also define a max-width of 100% in order first to allow smaller widths to be rendered and secondly to be percentage based which makes it parametric.

.photo > img {
  max-width: 100%;
  max-height: 150px;
  -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,1);
  -moz-box-shadow:    0 0 13px 3px rgba(0,0,0,1);
  box-shadow:         0 0 13px 3px rgba(0,0,0,1);
}

Note that it has a nice shadow ;)

Enjoy a live example at this fiddle: http://jsfiddle.net/pligor/gx8qthqL/2/

Thanks for this solutions and jsdfiddle link. This actually worked for my react-image-gallery where I use both: images with bigger height and images with bigger width. :) — Eugenijus S., Dec 06 '18 at 12:05

score 4 · Answer 8 · answered Aug 12 '15 at 15:36

4

I use this for a rectangular container with height and width fixed, but with images of different sizes.

img {
  max-width: 95%;
  max-height: 15em;
  width: auto !important;
}

answered Aug 12 '15 at 15:36

Alejandro Salamanca Mazuelo

1,173
15
21

score 4 · Answer 9 · answered Sep 30 '19 at 15:08

Nowadays one can use vw and vh units, which represent 1% of the viewport's width and height respectively.

https://css-tricks.com/fun-viewport-units/

So, for example:

img {
  max-width: 100vw;
  max-height: 100vh;
}

... will make the image as wide as tall as possible, maintaining aspect ratio, but without being wider or higher than 100% of the viewport.

score 3 · Answer 10 · answered Nov 03 '13 at 10:27

Its best to use auto on the dimension that should respect the aspect ratio. If you do not set the other property to auto, most browsers nowadays will assume that you want to respect the aspect ration, but not all of them (IE10 on windows phone 8 does not, for example)

width: 100%;
height: auto;

score 2 · Answer 11 · answered Aug 12 '13 at 19:51

2

This is a very straightforward solution that I came up with after following conca's link and looking at background size. It blows the image up and then fits it centered into the outer container w/o scaling it.

<style>
#cropcontainer
{
  width:  100%; 
  height: 100%; 
  background-size: 140%;
  background-position: center;
  background-repeat: no-repeat;
}
</style>

<div id="cropcontainer" style="background-image: url(yoururl); />

answered Aug 12 '13 at 19:51

bill davis

323
2
9

Good and smart solution! With the additional 40% you are compensate the aspect ratio. Thanks! – Sascha Jul 09 '16 at 17:23
You could also just use `background-size: contain;` to fit the image into a background. – Simon G Mar 28 '17 at 19:04

score 1 · Answer 12 · edited Nov 23 '15 at 21:51

1

Not to jump into an old issue, but...

#container img {
      max-width:100%;
      height:auto !important;
}

Even though this is not proper as you use the !important override on the height, if you're using a CMS like WordPress that sets the height and width for you, this works well.

edited Nov 23 '15 at 21:51

Dmitri Zaitsev

13,548
11
76
110

answered Mar 16 '15 at 19:18

Levi G

19
1

score 1 · Answer 13 · answered Jun 22 '23 at 07:57

1

To attempt a width of 100% and force a maximum height without distorting the aspect ratio, you can add a max-height declaration combined with object-fit:contain.

width:100%;
max-height: 600px;
object-fit: contain;

answered Jun 22 '23 at 07:57

Morris

218
1
10

score 0 · Answer 14 · answered Dec 09 '13 at 07:12

Use JQuery or so, as CSS is a general misconception (the countless questions and discussions here about simple design goals show that).

It is not possible with CSS to do what you seem to wish: image shall have width of 100%, but if this width results in a height that is too large, a max-height shall apply - and of course the correct proportions shall be preserved.

score -2 · Answer 15 · edited Nov 23 '15 at 21:51

-2

I think this is what your looking for, i was looking for it my self, but then i remembered it again befor i found the code.

background-repeat: repeat-x;
background-position: top;
background-size:auto;
background-attachment: fixed;

digital evolution is on its way.

edited Nov 23 '15 at 21:51

Dmitri Zaitsev

13,548
11
76
110

answered Jul 12 '14 at 18:48

Peter Gruppelaar

126
1
9

CSS: 100% width or height while keeping aspect ratio?

15 Answers15

Linked