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

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