拉伸图像以填充浏览器窗口的宽度 [英] Stretch an image to fill width of browser window

问题描述

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

如何在HTML和CSS中执行此操作？ 您可以添加宽度为100％的div，设置图片的宽度和高度均为100％。b
$ b $ p $ < div id = 包装 >
< img src =http://lorempixel.com/200/200/>
< / div>


CSS：

  #wrapper，img {
 width：100％; 
身高：100％; 
} 
  

jsfiddle

I have an image, and I want the width to fill up the browser window, no matter the size of the window.

How do I do this in HTML and CSS?

解决方案

You can add a div with width an height of 100%, also set image's width and height are 100%

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

CSS:

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

jsfiddle

这篇关于拉伸图像以填充浏览器窗口的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！