CSS Image Max-Width Set to Original Image Size

CSS image max-width set to original image size?

Just don't set the width of the image, only the max-width.

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

(height:auto is not really necessary, since auto is the default, but I put it in there as a reminder to myself that I want the image to have its natural proportions.)

This snippet has two boxes, one that is smaller than the image and one that is larger. As you can see, the image in the smaller box gets scaled down, while the one in the bigger box has its normal size.

div {border:2px outset green; margin:6px 0}

.box1 {width:100px; height:70px;}

.box2 {width:200px; height:100px;}

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

<div class="box1">

    <img src="https://i.stack.imgur.com/FuQYf.png" alt="Sample Image" />

</div>

<div class="box2">

    <img src="https://i.stack.imgur.com/FuQYf.png" alt="Sample Image" />

</div>

Scale image with CSS but limit to orignial size

You could use max-width to prevent image width from becoming larger than original size.

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

Why setting max-width: 100% of an image effectively set the maximum to its original width?

Consider a 1000px wide image in a 400px wide div. max-width 100% prevents the image from exceeding the size of the div.

Changing image sizes proportionally using CSS

This is a known problem with CSS resizing. Unless all images have the same proportion, you have no way to do this via CSS.

The best approach would be to have a container, and resize one of the dimensions (always the same) of the images. In my example I resized the width.

If the container has a specified dimension (in my example the width), when telling the image to have the width at 100%, it will make it the full width of the container. The auto at the height will make the image have the height proportional to the new width.

Example:

HTML:

<div class="container">
    <img src="something.png" />
</div>

<div class="container">
    <img src="something2.png" />
</div>

CSS:

.container {
    width: 200px;
    height: 120px;
}

/* Resize images */
.container img {
    width: 100%;
    height: auto;
}

CSS force image resize and keep aspect ratio

img {

  display: block;

  max-width:230px;

  max-height:95px;

  width: auto;

  height: auto;

}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>

<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

CSS - Image wouldn't enlarge up to its original size

max-width will only let the image grow as big as the image pixel dimensions. Your image is naturally 640px wide.

If you do this...

.image {
  background: grey;
  width: 100%;
}

Then the image grows 100% of the window.

https://jsfiddle.net/joshmoto/gr7u1ytq/3/

Scaling img with window, max-width

If your image is smaller than the containing DIV, your CSS rule won't make it any bigger. Try to use width instead of max-width:

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

Addition/Edit after Comments of OP:

You can use any percentage value in this rule, like 60% (or whatever you like), but using width, not max-width (which is only a maximum limit, but not an actual size definition).

But note: It won't really look good if the original image is smaller than displayed and is "blown up".

CSS: Set Max Width of an Image to Its Actual Pixel Width

I think the following may work. Set the max-width: 90% and the let the image take its natural width (width: auto, default value).

See the samples below.

There is an end-point (corner case) when the image size is identical to the width of the containing block (screen size). In this case, the image will take 90% of the width of the parent block. If you need this to be 100%, you would need jQuery/JavaScript to take care of the exception.

div {

  border: 1px dotted blue;

  margin: 10px 0;

}

div img {

  max-width: 90%;

  vertical-align: top; /* Removes white space below baseline */

}

.ex1 {

  width: 500px;

}

.ex2 {

  width: 400px;

}

.ex3 {

  width: 300px;

}

<div class="ex1">

  <img src="http://placehold.it/400x100">

</div>

<div class="ex2">

  <img src="http://placehold.it/400x110">

</div>

<div class="ex3">

  <img src="http://placehold.it/400x120">

</div>

---

Related Topics