与窗口大小相同的图像元素：关闭答案

【问题标题】：Image element same size as window: closed与窗口大小相同的图像元素：关闭
【发布时间】：2020-08-13 02:57:34
【问题描述】：

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

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

有什么帮助吗？

JavaScript 有帮助吗？

【问题讨论】：

请添加您的示例代码...
欢迎来到 Stack Overflow。请edit 包含minimal reproducible example 的问题，因为这将有助于提高您获得的答案的质量。

【解决方案1】：

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

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

&lt;img src="https://via.placeholder.com/1500" /&gt;

【讨论】：

【解决方案2】：

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

【讨论】：

只有代码的答案通常可以通过添加一些关于它们的工作方式和原因的解释来改进。
所提供的答案被标记为低质量帖子以供审核。以下是How do I write a good answer? 的一些指南。这个提供的答案可以从解释中受益。仅代码答案不被视为“好”答案。来自评论。

【解决方案3】：

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

img {
    width: 100%;
}

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

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

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

【讨论】：