html - How to stretch an image to fit screen and maintain aspect ratio using CSS? -


See my example here -

Image resizes properly when you shrink the browser window And maintains it's aspect ratio. Although I always want to stretch the image to fill the screen, but in this case it never spreads beyond the original resolution.

If I set the width: 100% rather than the maximum width, it will stretch the image to fit in width, but if you set the window, then the image will start to distort. .

If I set the height: instead of the maximum height, instead of over 100% I overflow / scrollbar.

So I'm a little bit stuck! Please note that the images will be of different aspect ratios and resolutions.

I think it may not be a good idea in the long run, because the 1024x768 blown image on a 4k screen can look a bit dirty. Still still want a solution though still want a solution.

Set the image as the background of a div & amp; Background-Size: Cover; Use . This aspect will increase it to fill the screen without losing the ratio, regardless of any image dimension.


Comments

Popular posts from this blog

import - Python ImportError: No module named wmi -

Editing Python Class in Shell and SQLAlchemy -

c# - MySQL Parameterized Select Query joining tables issue -