图片元素与 window 大小相同：已关闭

Question

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

我什至尝试了一些 css，但它只有一种尺寸：与计算机尺寸相同，对于平板电脑或 phone。

有什么帮助吗？

JavaScript 有帮助吗？

Answer 1

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

Answer 2

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

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

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

Answer 3

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

img {
    width: 100%;
}

或者如果你想让它成为页面的背景图片，你可以使用background-image元素。示例：

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

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

Image element same size as window: closed