拉伸圖像以填充瀏覽器窗口的寬度

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;}

防止這種行為，我想這是為了防止無格式的頁面呈現推送到頁面邊緣的內容。 這里討論過 。

Answer 5

您在HTML文檔的頭部添加以下<meta>元素：

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

然后你添加

max-width:100%;
height:auto;

作為圖像和圖像容器的CSS規則。 （它也適用於沒有容器的圖像。）

而你補充說

body {
    margin: 0;
}

擺脫圖像和/或容器周圍的邊緣。 無論屏幕大小如何，這都是您的圖像填充整個屏幕寬度的方式。