Question

开发网站位于http://www.clhdesigns.com/cliwork/wintermeresod/about.php

我遇到的问题是，如果您查看主页，背景图片可以完美缩放，而在我们这个页面上它完全没有。我正在寻找的是100％缩放，这是我的代码。

<div id="main" class="about">
<div class="inner">
<div class="welcome_intro2">
  <h1>Growing Top Quality Sod</h1>
  <h2>for over 25 years</h2>
</div>

现在这里是相应的CSS

#main { float:left; width:100%;   padding:1em 0 3em 0; color:#666;}

.about {
background: url("../images/banner3010.jpg") no-repeat;
height:582px;
width:100%;
}

我正在寻找的是将图像的高度保持在桌面所在的位置，但我需要它能够100％响应。有任何想法吗？

Answer 1

看看。

.about {
background: url("../images/banner3010.jpg") no-repeat 50% 50%;
height:582px;
}

Answer 2

这是SCREENSHOT的工作原理。我使用了与第一页中的图像相同的代码，这使它具有响应性。检查以下代码

.about {
    background: url("../images/banner3010.jpg") center center no-repeat;
    height:582px;
}

您可以对平板电脑和手机图片@media

使用height次查询

@media screen and (max-width: 768px) {
   .about {
        height:300px; /*whatever height you want*/
    }
}

背景图像没有响应

2 个答案: