html - 背景图片不能调整到 700px 以下

Question

我被交给了一个现有的网站来处理它对背景图像有响应问题。 background-image 分配给的 #banner 在断点 @700px 以上响应，但不会在该屏幕宽度以下调整大小，从而破坏该断点以下网站的响应能力。

HTML:

<section id="banner">
<header>
<em><b>CALL 716-763-0069 Proudly Serving New York & Pennsylvania For Over 35 Years</b></em>
</header>               
</section>`

CSS:

background-image: url("../../images/IMG_1890.jpg");
background-position: center center;
background-size: cover;
height: 28em;
text-align: center;
position: relative;

背景图像似乎是在各种断点上使用以 em 为单位的高度进行缩放的。以下是一些更相关的透视断点:

@media screen and (max-width: 840px) {
#banner {height: 20em;}}

@media screen and (max-width: 736px) {
#banner {height: 18em;}}

@media screen and (max-width: 480px) {
#banner {height: 16em;}

Answer 1

该网站的正文有一个 min-width: 700px。将其移除，该网站将以任何尺寸响应。