CODEWITHSUNDEEP
htmlcss
king
king

Reputation: 1344

Possible To Have % Based Element Size, But Have Maximum PX Width It Will Goto?

I'm designing a mobile website and I want the image that I am using to be fluid in order to match the individual's browser size. However, I don't want someone to come to the website with a massive browser resolution or something just out of my next media query and have it look bad. So I'm wondering if it's possible to have a maximum width the image will go? For example, if I set the image to 90% width, but then it can say something like, however, it can only be a maximum of 500px long, after that it will just say 500px long. (I also want to do this with other elements, like div wrappers)

Also, with the %'s, does the image maintain it's same aspect ratio?

Upvotes: 0

Views: 41

Answers (1)

lpd
lpd

Reputation: 2337

The correct behaviour of max-width should override the image's width. Like so:

img {
    width: 90%;
    max-width: 500px;
}

MDN page: https://developer.mozilla.org/en-US/docs/CSS/max-width#Notes

Upvotes: 2

Related Questions