Currently, with STYLE, I can use width: 100% and auto on the height (or vice versa), but I still can't constrain the image into a specific position, either being too wide or too tall, respectively.
Any ideas?
CSS: 100% width or height while keeping aspect ratio?
Viewed 545818
14 Answers
Nowadays one can use vw and vh units, which represent 1% of the viewport's width and height respectively.
https://css-tricks.com/fun-viewport-units/
So, for example:
img {
max-width: 100vw;
max-height: 100vh;
}
... will make the image as wide as tall as possible, maintaining aspect ratio, but without being wider or higher than 100% of the viewport.
Related