缩放图像以适应屏幕而不改变其纵横比

Question

How can I have an image take scale the screen while keeping it's aspect ratio in CSS? For example, if I have an image that is taller than it is wide its height should be 100% (and width: auto; ). But if the image is wider than it is tall its width should be 100% (and height: auto; ).

Can I do this in CSS?

If the height and the width are both 100% than the image is all squished together like so:

If the height and width are both auto , the image scales correctly unless it is smaller than the screen's size, then it leaves gaps around its edges:

Answer 1

You can use object-fit: cover , this ensures that the image doesn't lose its aspect ratio. You can also use a percentage value like width: 70% , and height: auto so the image scales down when resized