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

Question

I am playing around with a responsive layout and I am trying to get my image handling to behave a specific way.
I want the max-width of my image to never exceed its actual resolution, however if that is too wide for the screen I'd like the width to be 90% of the screen width. The only solution I can come up with for this is set width: 90%; and then to hard-code the max-width for every image I want to display like this, which is problematic if I want to change the image on the fly or update it frequently.
Is there any CSS I can use to describe this scenario or do I have to rely on javascript tricks to set the max-width from the image's actual width once the image has finished loading?

Answer 1

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>