我被交给了一个现有的网站来处理它对背景图像有响应问题。 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;}
最佳答案
该网站的正文有一个 min-width: 700px
。将其移除,该网站将以任何尺寸响应。
关于html - 背景图片不能调整到 700px 以下,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45219548/