javascript - 去除 HTML 图像中的空白

Question

我陷入了两难境地。我有一个图像，我想占据网页的背景。我希望它横跨屏幕的宽度和高度，并保持那个尺寸。当我使用 <img>标签，我不知道如何将它拉伸(stretch)到没有白条的屏幕上。 wspace 和 hspace 在 HTML5 中已弃用，因此它们不起作用。此外，我尝试将其实现为 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;
        }