html - 与窗口大小相同的图像元素：关闭

Question

我想在我的 html 网站上有一个与网站宽度相同的图像。我显然已经使用了，<meta name="viewport" content="width=device-width, initial-scale=1.0">但图像仍然没有改变大小。

我什至尝试过一些 css，但它只有一种尺寸：和电脑一样大，对于平板电脑或手机来说要大。

有什么帮助吗？

JavaScript 能帮上忙吗？

Answer 1

你应该使用视口单元来做到这一点。

img {
   display: block;
   width: 100vw;
   object-fit: cover;
}

<img src="https://via.placeholder.com/1500" />

Answer 2

<img src='' style='width: 100%; object-fit:cover'/>

Answer 3

我认为您可以将图像的宽度设置为 100%。例子：

img {
    width: 100%;
}

或者，如果您希望它成为页面的背景图像，您可以使用 background-image 元素。例子：

body {
    background-image: url(your image name);
    background-size: cover;
}

我不确定这是否可行。至少，你可以试试。