[html] How to set an image's width and height without stretching it?

If I have:

#logo {
    width: 400px;
    height: 200px;
}

then

<img id="logo" src="logo.jpg"/>

will stretch to fill that space. I want the image to stay the same size, but for it to take up that much space in the DOM. Do I have to add an encapsulating <div> or <span>? I hate adding markup for styling.

What I can think of is to stretch either width or height and let it resize in ratio-aspect. There will be some white space on the sides. Something like how a Wide screen displays a resolution of 1024x768.

You can use as below :

.width100 {_x000D_
  max-width: 100px;_x000D_
  height: 100px;_x000D_
  width: auto;_x000D_
  border: solid red;_x000D_
}

<img src="https://www.gravatar.com/avatar/dc48e9b92e4210d7a3131b3ef46eb8b1?s=512&d=identicon&r=PG" class="width100" />

If using flexbox is a valid option for you (don't need to suport old browsers), check my other answer here (which is possibly a duplicate of this one):

Basically you'd need to wrap your img tag in a div and your css would look like this:

.img__container {
    display: flex;
    padding: 15px 12px;
    box-sizing: border-box;
    width: 400px; height: 200px;

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

Do I have to add an encapsulating <div> or <span>?

I think you do. The only thing that comes to mind is padding, but for that you would have to know the image's dimensions beforehand.

Make a div and give it a class. Then drop a img in it.

<div class="mydiv">

<img src="location/of/your/image" ></img>

</div>

Set the size of your div and make it relative.

    .mydiv {
        position: relative;
        height:300px;
        width: 100%;
        overflow: hidden;
    }

then style your image

img {
    width: 100%;
    height: auto;
    overflow: hidden;
}

Hope that helps

you can try setting the padding instead of the height/width.

Load the image as a background for a div.

Instead of:

<img id='logo' src='picture.jpg'>

do

<div id='logo' style='background:url(picture.jpg)'></div>

All browsers will crop the part of the image that doesn't fit.
This has several advantages over wrapping it an element whose overflow is hidden:

1. No extra markup. The div simply replaces the img.
2. Easily center or set the image to another offset. eg. url(pic) center top;
3. Repeat the image when small enough. (Ok, I don't know, why you would want that)
4. Set a bg color in the same statement, easily apply the same image to multiple elements, and everything that applies to bg images.

Update: This answer is from before object-fit; you should now probably use object-fit/object-position.

It is still useful for older browsers, for extra properties (such as background-repeat), and for edge cases (For example, workaround Chrome bugs with flexbox and object-position and FF's (former?) issues with grid + autoheight + object-fit. Wrapper divs in grid / flexbox often give... unintuitive results.)

#logo {
    width: 400px;
    height: 200px;

    /*Scale down will take the necessary specified space that is 400px x 200px without stretching the image*/
    object-fit:scale-down;
}

2017 answer

CSS object fit works in all current browsers. It allows the img element to be larger without stretching the image.

You can add object-fit: cover; to your CSS.

This is quite old question, but I have had the exact same annoying issue where everything worked fine for Chrome/Edge (with object-fit property) but same css property did not work in IE11 (since its unsupported in IE11), I ended up using HTML5 "figure" element which solved all my problems.

I personally did not use the outer DIV tag since that did not help at all in my case, so I avoided the outer DIV and simply replaced with 'figure' element.

The below code forces the image to reduce/scale down nicely (without changing the original aspect ratio).

<figure class="figure-class">
  <img class="image-class" src="{{photoURL}}" />
</figure>

and css classes:

.image-class {
    border: 6px solid #E8E8E8;
    max-width: 189px;
    max-height: 189px;
}

.figure-class {
    width: 189px;
    height: 189px;
}

CSS3 object-fit

Am not sure how far its been implemented by webkit, IE and firefox. But Opera works like magic

object-fit works with SVG content, but the same effect can also be achieved by setting the preserveAspectRatio="" attribute in the SVG itself.

img {
  height: 100px;
  width: 100px;
  -o-object-fit: contain;
}

Chris Mills demo's it here http://dev.opera.com/articles/view/css3-object-fit-object-position/