CODEWITHSUNDEEP
responsive-designimage-scaling
Julian Adorney
Julian Adorney

Reputation: 1

How to make an image responsive using CSS?

How do you make an image responsive, such that it keeps its proportions as you change the screen size? i.e. if I have a book cover in the center right of an image (as in the header image here http://julianadorney.com/), how do I keep the book cover at roughly the same point in the image on different screens?

I've jury-rigged something using about 30 different media queries of min-height and min-width, but it seems like there should be a much more elegant solution.

I tried width: 100% and height: auto; no luck

Please, no Javascript. I won't know what it is...

Thanks in advance, Julian

Upvotes: 0

Views: 61

Answers (1)

Wka Zisan
Wka Zisan

Reputation: 11

sorry man, I know it's too late and you know it already. but I will answare . You can make a image responsive using

img{
    height: auto;
    width: 100%;
}
<img src="https://1.bp.blogspot.com/-MEzgCTqi2es/X3dZYeZFtuI/AAAAAAAATc0/ltXNshjx26wqPp1bVSMf9R-EWINMpHRYgCLcBGAsYHQ/s16000/A%2Bcommercieal%2BFair%2B6.jpg" alt="Image of Banijjo Mela 2020">

then resive screen and see. You can do it also by using media.

Upvotes: 1

Related Questions