Fluid image using percentage: how do I make the correct approach?

Question

I've been reading about fluid layouts and came across a very good article that can help me to achieve what I need right now. It is about fluid images using percentage instead of max-width.

A Better Fluid Image Solution: http://demosthenes.info/blog/586/CSS-Fluid-Image-Techniques-for-Responsive-Site-Design

For example, let’s say you had an image that had a natural size of 500px × 300px in a 1200px wide document. Below 1200px, the document will be fluid. The calculation of how much width the image takes up as a percentage of the document is easy: (500 / 1200 ) × 100 = 41.66%

It sounds perfect for what I need, but there is one thing I dind't understand: how do I tell the browser that the image should take up 41.66% of the document ONLY when width is BELOW 1200px? If i simply set <img src="something.jpg" style="width: 41.66%;> it will make the image always take up 41,66%, and I need this to happen only below 1200px wide.

Any help would be highly appreciated!

Answer 1

You would media queries to do this.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

img {
    width: 500px;
}
@media ( max-width 1200px ) {
    img {
        width: 41.66%;
    }
    .img2 {
        width: 42%;
    }
}