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

Question

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.

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

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

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