Question

我有一个横幅代码，可以在笔记本电脑的屏幕上正确显示横幅图像，但是当我在手机上打开同一网页时，横幅显示的高度非常小，因此阅读起来很窄。如何解决此问题，以便我可以使横幅广告在笔记本电脑屏幕上的尺寸保持与现在相同，但在移动屏幕上却要大得多？

HTML代码：

<?php

echo "<div class=custom-banner><img src=https://www.garnfyndet.se/wp-content/uploads/2019/12/banner.gif></div>";

?>

.custom-banner {
  background-position: center center;
  position: relative;
  box-sizing: border-box;
  display: block;
  z-index: 999;
}

<div class=custom-banner><img src=https://www.garnfyndet.se/wp-content/uploads/2019/12/banner.gif></div>

我正在使用WordPress，所以也许它继承了WordPress的style.css的一些CSS属性。当前，横幅图像尺寸为1950 x75。

Answer 1

您需要将img宽度设置为100％，以便响应。并且CSS选择器必须为.custom-banner img

.custom-banner   {
      background-image: url('https://www.garnfyndet.se/wp-content/uploads/2019/12/banner.gif');
    background-position: center center;
    background-size: contain;
    position: relative;
    width: 100%;
    height: 75px;
    background-repeat: no-repeat;
}

    }
    
     @media only screen and (max-width: 800px) {
 .custom-banner   {
    background-image: url('https://www.voicesofyouth.org/sites/default/files/images/2019-03/nature-3125912_960_720.jpg');
    height:400px;
    }
  }

<div class=custom-banner></div>

另外，您需要为手机设置另一张较低的img，此照片不适用于响应式手机。

您可以将此类CS用于移动设备，并且当设备宽度小于400px 时，背景图片会更改。例如：

 @media only screen and (max-width: 400px) {
 .custom-banner {
    background-image: url('https://www.voicesofyouth.org/sites/default/files/images/2019-03/nature-3125912_960_720.jpg');
    }
  }

横幅广告显示移动设备较小，笔记本电脑较大

1 个答案: