我正在尝试拉伸(stretch) 标签中的图像以适应整个屏幕,与宽高比无关。例如,我希望它在 16:9 和 21:9 屏幕上都适合整个屏幕。我尝试了以下 css 以及 size: 100% 100%;
它们都不起作用,我的浏览器窗口两侧有滚动条。
我想实现这个:http://nemesisvisuals.com 。
正如您所看到的,背景图像(我故意使用 < img > 标签,因此我想要相同的结果,但使用 < img > 标签)无论如何都会拉伸(stretch)以适合屏幕。
<!DOCTYPE html>
<html>
<head>
<style>
img{
height: 100vh;
width: 100vw;
}
</style>
</head>
<body>
<img src="img.jpg">
</body>
</html>
最佳答案
你就快到了:
* {
margin: 0;
padding: 0
}
img {
display: block;
height: 100vh;
width: 100vw;
}
<img src="https://picsum.photos/1280/720">
关于javascript - 拉伸(stretch) <img> 以适合整个屏幕,而不保持宽高比且没有滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60118040/