为移动设备调整 HTML/CSS 中的图像大小

Question

我有一张背景图片，但我真的不知道如何为移动设备调整它的大小...我已经尝试了所有方法！宽度：100%，最大宽度：100%；等等 是高度/覆盖物影响它吗？

.jumbotron {
  background-image:url('http://www.part-box.com/images/yellow-frog.png');
  height: 500px;
  background-repeat: no-repeat;
  background-size: cover;
}

Answer 1

媒体查询可以解决这个问题。计算移动设备和其他设备的宽度。

 @media screen and (max-width: 1000px) {
        .jumbotron {
           background-image:url('http://www.part-box.com/images/yellow-frog.png');
            height: 200px; // customize it
            background-repeat: no-repeat;
            background-size: cover;
              }
    }

 @media screen and (max-width: 300px) {
        .jumbotron {
           background-image:url('http://www.part-box.com/images/yellow-frog.png');
            height: 500px; //customize it
            background-repeat: no-repeat;
            background-size: cover;
              }
    }

或者，您可以将 html 与引导程序集成，使代码在所有平台上都能响应。