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

Question

我有一張圖片，我希望寬度填滿瀏覽器窗口，無論窗口的大小如何。

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

Answer 1

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

這假設圖像的容器和瀏覽器窗口一樣寬。

Answer 2

您可以添加一個div寬度100％的高度，還設置圖像的寬度和高度均爲100％

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

CSS：

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

jsfiddle

Answer 3

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

CSS文件

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