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

Question

我被交给了一个现有的网站来处理它对背景图片有响应问题。 #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。将其取出，网站将在任何尺寸下响应。

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

Background image not resizing below 700px

html

css

background-image