拉伸以适合整个屏幕，而无需保持长宽比和滚动条

问题描述 投票：0回答：1

我正在尝试在标签中拉伸图像以适合整个屏幕，而不受纵横比的影响。例如，我希望它可以同时适合16：9和21：9屏幕的整个屏幕。我尝试了以下CSS和size: 100% 100%;它们都不起作用，我的浏览器窗口的侧面有滚动条。我想实现这一目标：http://nemesisvisuals.com。如您所见，背景图片（我故意使用标签，因此我希望得到相同的结果，但带有标签）可以拉伸以适合屏幕，无论如何。

<!DOCTYPE html>
<html>
    <head>
        <style>
            img{
                height: 100vh;
                width: 100vw;
            }
        </style>
    </head>
    <body>
        <img src="img.jpg">
    </body>
</html>
javascript html css image size
1个回答
1
投票

您几乎在那里：

* {
  margin: 0;
  padding: 0
}

img {
  display: block;
  height: 100vh;
  width: 100vw;
}
<img src="https://picsum.photos/1280/720">
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.