拉伸图像以填充浏览器窗口的宽度

Question

我有一张图片，无论窗口大小如何，我都希望宽度能够填满浏览器窗口。

如何在HTML和CSS中执行此操作？

Answer 1

您可以添加宽度和高度均为100％的div，同时设置图像宽度和高度均为100％

<div id="wrapper">
    <img src="http://lorempixel.com/200/200" />
</div>​​​​​​​​​​

CSS：

#wrapper, img{
    width:100%;
    height: 100%;
}

jsfiddle

Answer 2

<img src="filename.jpg" alt="alt text" width="100%" />

这假设图像的容器与浏览器窗口一样宽。

Answer 3

<div class="fixpixel">
    <img src="ImagePath" />
</div>​​​​​​​​​​

CSS文件

.fixpixel img{
height: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
 }

Answer 4

body元素的边距设置为默认值8px，这是您看到的空间，该空间阻止图像拉伸屏幕的整个宽度和高度。

您可以添加

body {margin: 0px;}

为防止此行为，我猜这是为了防止未样式化的页面将内容呈现到页面边缘而放置的。 here中对此进行了讨论。

Answer 5

您将以下<meta>元素添加到HTML文档的开头：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

然后添加

max-width:100%;
height:auto;

作为图像和图像容器的CSS规则。 （它也可以在没有容器的情况下用于图像。）

然后添加

body {
    margin: 0;
}

摆脱图像和/或容器周围的空白。无论屏幕大小如何，图像都将以此方式填充屏幕的整个宽度。