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?

Solution 1

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.

Solution 2

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

Solution 3

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;      
}

Solution 4

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%);
}

Solution 5

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;
}

View more solutions

Comments

[Mauro]

can you post a link or screenshot to show an example of the issue?

[Weston Watson]

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...

[Andrew]

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.

[Gregory Pakosz]

yet setting height to auto causes reflow when image is floated

[japrescott]

the ideal solution, which sadly isn't supported by IE8 :(

[northamerican]

using max-height on my img allowed me to constrain images while keeping their aspect ratio

[Eli]

Cheers - exactly what I was looking for.

[Sascha]

Good and smart solution! With the additional 40% you are compensate the aspect ratio. Thanks!

[Ash Clarke]

Thanks for reminding me about object-fit. Exactly what I needed.

[Vikas Bansal]

upvoted the first part. second part did not work for me... :(

[Simon G]

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]

You could also just use background-size: contain; to fit the image into a background.

[kloddant]

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.

[JustAMartin]

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.

[London Smith]

Exactly what I was looking for. Thanks a million dude.

[Lee Goddard]

object-fit no use?

[Rehmat]

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".

[Eugenijus S.]

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. :)

[Hampus Ahlgren]

As of March 2019 this feature has 90% support - so this really should be considered the correct answer.

[FlameStorm]

Also, notice that object-fit: contain and object-fit: cover dont like width like 100% - you should use concrete units like px

[Halfacht]

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%

[nuthan ratnam vara]

@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.

[Davis Jones]

This was the best solution for me. Our stack: react + material UI

[texelate]

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.

[Liam]

Note: object-fit will affect negatively scroll behavior. use background-size: cover instead

[Alex Rummel]

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

[Jacob Broughton]

This works great! I have a range of vertical and horizontal images that are all slightly different sizes and this works really well.

[Alberto Acuña]

the problem is when in a screen mobile, is not full height

[Mustkeem K]

object-fit may crop image and hide details