Content that fits the screen but doesn't scroll


Hello. I’m having some problems in rendering a content (a card with an image inside, let’s say) that takes all the screen available, but doesn’t overflow not in height nor in width. In other size, l’d like my image to scale down to be fully visible (pretty much like object-fit: contain CSS3 property behaviour) and not clipping in any of the two directions, and to be resized accordingly when I rotate my device, or when I use a different screen size.

Is that possible somehow?


You need to use either flex-box or height: 100vh;