个人中心
gpt4 book ai didi

html - 通过 css 背景图像与 div 的响应图像

转载 作者：太空宇宙 更新时间：2023-11-04 07:51:14 24 4
gpt4 key购买 nike

我发现这里也有类似的问题，比如Responsive CSS background images .

除非我为该 div 设置了准确的图像高度，否则此解决方案对我不起作用。首先，如果我不设置它的高度，图像将不会显示，因为 div 的高度将为零。其次，如果我为它设置高度，它不会响应浏览器宽度。就像我加宽浏览器一样，我希望图像会相应地放大以适应宽度。但是如果我使用 height: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>

最佳答案

除非任何父元素具有以像素为单位的高度，否则以百分比表示的高度将不起作用。

我的建议是使用 img 标签而不是 background-image 来使其响应。

但是，如果您只能将 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>

关于html - 通过 css 背景图像与 div 的响应图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47741317/

24 4 0
文章推荐： html - 将容器设置为 50% 宽度
文章推荐： java - JSF数据表过滤: Placeholders
文章推荐： java - 分发 XML 文件
文章推荐： c++ - 在 WSAEnumNetworkEvents 之后调用 WSAResetEvent 是否会导致事件不再被设置？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com