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

Question

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

HTML代码：

<?php

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

?>

CSS代码：

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

我正在使用wordpress，所以也许它继承了wordpress的style.css中的某些CSS属性。当前横幅广告图片尺寸为1950 x 75。

Answer 1

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

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

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

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

您可以在移动设备中使用像这样的cs，并且当设备宽度小于[<400px]时，背景图像将被更改。例如：

 @media only screen and (max-width: 400px) {
 .custom-banner img {
    background-image: url('https://www.garnfyndet.se/wp-content/uploads/2019/12/banner.gif');
    }
  }