Question

我希望我的背景图片能够填充正在查看它的窗口的高度。显然，我不知道这个值，因为它是可变的。我知道有可能使用jQuery做我想做的事情但是在搜索SO和谷歌大约一个小时而没有找到我的问题的答案后，我放弃了并决定提出要求。

我将背景图片设置为使用css覆盖<div>。

我如何实现预期的结果？

Answer 1

根据窗口高度使用Jquery背景图像 查看代码段

  

$(document).ready(function () {
     var winHeight = $(window).height();
     $('.window-height-bg').css('height', winHeight + 'px');
});

   

 body{
      margin:0px;
     }
    .window-height-bg {
       width:100%;
       background:red url(http://i67.tinypic.com/2mqj1iq.jpg) no-repeat;
       background-size:100% 100%;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="window-height-bg">
</div>

Answer 2

您好，您可以通过在图像标签或div中使用max-width属性或通过将图像设置为body标签来实现它

max-width: 100%;

或者像这样

<body background="http://ssmstorage.blob.core.windows.net/thumbnail/thumbnail_6e9579e9-ec17-4fce-a8cb-6421322b5460.jpg">

Answer 3

我认为以下代码可以帮助您

请查看链接以获取更多详细信息Link

<body  background="w3s.png">
<img style=" display: inline-block;
    max-width: 100%;
    vertical-align: middle;" src="http://ssmstorage.blob.core.windows.net/thumbnail/thumbnail_6e9579e9-ec17-4fce-a8cb-6421322b5460.jpg" alt="Smiley face" width="50%" height="50%">
<h1>dfksdhfsdfklsdfhsdklfhlskfsdlfjklsf</h1>
<img style=" display: inline-block;
    max-width: 100%;
    vertical-align: middle;" src="http://ssmstorage.blob.core.windows.net/thumbnail/thumbnail_6e9579e9-ec17-4fce-a8cb-6421322b5460.jpg" alt="Smiley face" width="50%" height="50%">
<h1>dfksdhfsdfklsdfhsdklfhlskfsdlfjklsf</h1>
<img style=" display: inline-block;
    max-width: 100%;
    vertical-align: middle;" src="http://ssmstorage.blob.core.windows.net/thumbnail/thumbnail_6e9579e9-ec17-4fce-a8cb-6421322b5460.jpg" alt="Smiley face" width="50%" height="50%">
</body>

如何使用jQuery设置背景图像高度？

3 个答案: