Scale image with CSS but limit to orignial size

Question

For a responsive design, i would like to scale down some images:

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

This works as expected, but if the width of the screen exceeds the original size of the image, it blows up the image.

Is there a way to limit this scaling to its original size? So that it only gets smaller if necessary?

Thanks in advance for your answer.

Willem

Isoline

Answer 1

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

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

Delfeena

Answer 2

Not answering for the scale bug for image size limit this could work:

img {
  max-height: max-content;
}

Imitation

Answer 3

Put the images in a <div> and give that <div> a max-width.

CSS

#test {
    max-width: 400px;
}
img {
    width:100%;
    height:auto;
}

HTML

<div id="test">
    <img src="http://a.dilcdn.com/bl/wp-content/uploads/sites/8/2012/09/02-11.jpg" />
</div>

JSfiddle

Carton

Answer 4

This worked for me.

CSS:

.captioned-image{
    margin: auto;
    text-align: center;
}

.captioned-image img{
    width: 100%; 
}

HTML

<div class="captioned-image">
    <img src="/img/my_image.jpg" style="width:max-content; max-width:max-content;">
</div>

You don't need to override the "width" property in the html like I did here -- I did it like that for my own project. I'm sure a css class like the one below would work, but I wanted to paste my exact code.

.img{
    max-width: max-content;
    width: max-content;
}

Lazaretto