Php 横幅显示手机上的小屏幕和笔记本电脑上的大屏幕

我有一个横幅代码，可以在我的笔记本电脑屏幕上正确地显示足够大的横幅图像，但当我在手机上打开同一个网页时，它显示的横幅高度非常小，因此很难阅读。如何解决这个问题，使横幅在笔记本电脑屏幕上保持目前的大小，但在移动屏幕上要大得多

HTML代码：

<?php

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

?>

---

您需要将img width设置为100%，以便它能够响应。css选择器必须是

。自定义横幅img

。自定义横幅{
背景图像：url（'https://www.garnfyndet.se/wp-content/uploads/2019/12/banner.gif');
背景位置：中心；
背景尺寸：包含；
位置：相对位置；
宽度：100%；
高度：75px；
背景重复：无重复；
}
}
@仅介质屏幕和（最大宽度：800px）{
.定制横幅{
背景图像：url（'https://www.voicesofyouth.org/sites/default/files/images/2019-03/nature-3125912_960_720.jpg');
高度：400px；
}
}

---

嗨，我现在使用了宽度：100%属性。但它在手机上仍然显示非常小的横幅。这里是链接：你必须使用另一张宽度较低的照片。如果我使用另一张照片，在css中的另一张图片2放在哪里？这是修改后的版本，但它仍然不工作。。。回声“；CSS代码：。自定义横幅img{背景位置：中心；位置：相对；框大小：边框框；显示：块；z索引：999；宽度：100%；}@media-only屏幕和（最大宽度：400px）{。自定义横幅{背景图像：url（'）；}请从html中删除img标记，只需使用cssSide更新

背景img

。注意：

应该被引用，正如

class=custom banner

应该被引用一样。