javascript - 拉伸(stretch) <img> 以适合整个屏幕,而不保持宽高比且没有滚动条

标签 javascript html css image size

我正在尝试拉伸(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/

相关文章:

javascript - 内联元素组 - Bootstrap 4

html - 在 amp-img 中设计响应式布局

javascript - 更改 HighCharts 背景颜色?

javascript - 如何在JQuery动画中设置 'auto'高度

javascript - JQuery:查找以任何一个指定字符串开头的所有 ID

javascript - 如何将 html 标题属性添加到 jquery ui 日期选择器小部件?

javascript - 如何从 JQuery 返回的数组中确定复选框的选中状态?

javascript - 使用Redux(Redux-Saga)的错误信息提示

javascript - 与 flex-wrap : wrap when increasing width onHover 发生冲突

javascript - 使用 Google Closure 编译器防止将导出的属性内联为常量