使图像显示全屏，即使在不同尺寸的屏幕上也不会超过屏幕的高度

Question

我有一张非常大的照片，比如1900像素的宽度和1333像素的高度，导致你必须向下滚动一下才能看到下一步是什么，有没有办法让图片显示与屏幕完全相同的高度和宽度甚至在不同的设备上？

谢谢！您可以在http://dive.maxinrui.com

找到我正在谈论的图片

代码是 <section class="box"> <img src="images/background1.jpg" class="img-responsive" alt=""> <div class="carousel-caption"> <h1>Welcome to ABI DIVE</h1> </div> </section>

Answer 1

如果您使用的是jQuery，则可以使用jQuery方法获取窗口或文档的大小：

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document

给你的img标签一个id，然后用CSS设置那个img元素的高度。

Answer 2

您可以使用CSS3：

    html { background-image: url('your_pic.png');
           background-size: cover;
    }