Question

我发现这里有类似的问题，例如Responsive CSS background images。

除非我为该div设置了图像的确切高度，否则此解决方案对我无效。首先，如果我没有设置它的高度，图像将不会显示为div的高度为零。其次，如果我为它设置高度，它将无法响应浏览器宽度。就像我扩大了浏览器一样，我预计图像会根据宽度适应放大。但如果我使用高度：100％，图像将不会再显示。

我希望它是：当我调整浏览器宽度时，使用css background-image属性响应性地放大/缩小图像宽度和高度。

我想这与一些基本的css技巧有关，但我并不擅长它。有人能建议我一些解决方案吗？非常感谢你！

.top-banner{
  height:100%;
}
@media (min-width:768px) {
  .top-banner {
    background-image: url('http://everetttheatre.com/wp-content/uploads/2016/03/toy-story-banner.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
}

@media (max-width:767px) {
  .top-banner {
    background-image: url('https://i.pinimg.com/originals/31/de/36/31de3624c128d5748039ae9523223eb5.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
}

<div class="top-banner">

</div>

Answer 1

百分比高度不会起作用，除非任何父元素的高度都是像素。

我的建议是使用img标签而不是背景图片来使其响应。

但是如果你只能将div与背景图像一起使用，那么你可以使用javascript更改窗口调整大小事件中div的高度。

如果图像的比例为4：3，则代码如下所示：

<body onresize="resizeFunction()">
   <style>
    .imgBackground {
       width : 100%;
       background : your image link;
       background-size : 100%;
    }
   </style>
   <div class="imgBackground"></div>
   <script>
       function resizeFunction() {
         var widthOfDiv = $('.imgBackground').width();
         var heightOfDiv = width/1.33;
         $('.imgBackground').height(heightOfDiv);
      }
   </script>
</body>

与div的敏感图象由css背景图象

1 个答案: