删除HTML图像中的空白

Question

我已经陷入了两难的境地。 我有一张要占用网页背景的图片。 我希望它可以延伸到整个屏幕的宽度和高度，并保持该大小。 当使用<img>标签时，我不知道如何在没有白色条的情况下将其拉伸到屏幕上。 HTML5中不推荐使用wspace和hspace，因此它们不起作用。 另外，我尝试将其实现为CSS样式，但稍后需要使用jQuery淡出整个页面，而将图像与background-image放在CSS中是不可能的。 目前，我正在使用它来实现图片：

<img class='background' src='Images/backgroundImg.jpg'/>

后台类如下所示：

.background {
                max-height:100%;
                max-width:100%;
            }

我应该添加什么以使图片完全占据屏幕，并且仍然可以通过jQuery与之交互？ 多谢你们！

Answer 1

不需要最大高度和最大宽度，只需高度和宽度以及位置。 尝试：

.background {
            position: absolute;
            height: 100%;
            width: 100%;
            top: 0px;
            left: 0px;
        }

或者您想要粘贴的定位图像：

.background {
            position: fixed;
            height: 100%;
            width: 100%;
            top: 0px;
            left: 0px;
        }

Answer 2

您可以尝试使用value cover object-fit属性。 注意，请确保签出浏览器支持表，因为IE目前不支持该表。

的jsfiddle

 html, body { height: 100%; margin: 0; } img { display: block; object-fit: cover; width: 100%; height: 100%; } 

 <img src="http://lorempixel.com/400/200/sports"> 

Answer 3

采用

background: url(../Content/Images/wallpaper.jpg) no-repeat center center fixed;
background-size: cover;//scretch image

Answer 4

好的，这就是您所需要的：

  <style> html { background: url(http://cdn7.viralscape.com/wp-content/uploads/2015/03/Manhattan-City-Line-at-night-New-York.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } </style> 

您只需要更改那里的链接，以及要使用的图片的路径（ Images/backgroundImg.jpg ）！

编辑：

要淡出整个页面，您需要使用的是：

HTML：

<div id="overlay">

CSS：

#overlay{
    opacity:3;
    background-color:#ccc;
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:1000;
    display: none;
}

然后，您可以使用jquery更改display: none; display: inline-block; 管他呢！