时间戳

首页 > 解决方案 > Stretch to fit the entire screen without keeping aspect ratio and without scrollbars

javascript - Stretch to fit the entire screen without keeping aspect ratio and without scrollbars

问题描述

I am trying to stretch an image in an < img > tag to fit the entire screen independent from aspect ratio. For example, I want it to fit the whole screen both on a 16:9 and a 21:9 screen. I tried the following css as well as size: 100% 100%; Neither of them worked, there are scrollbars on the sides of my browser window. I want to achieve this: http://nemesisvisuals.com.
As you can see the background image (I am using an < img > tag on purpose so I want the same results but with the < img > tag) stretches to fit the screen no matter what.

<!DOCTYPE html>
<html>
    <head>
        <style>
            img{
                height: 100vh;
                width: 100vw;
            }
        </style>
    </head>
    <body>
        <img src="img.jpg">
    </body>
</html>

标签： javascripthtmlcssimagesize

解决方案

You're almost there:

* {
  margin: 0;
  padding: 0
}

img {
  display: block;
  height: 100vh;
  width: 100vw;
}
<img src="https://picsum.photos/1280/720">

推荐阅读