Question

我的响应式设计有问题。当我调整浏览器的高度和宽度时，所有元素都在改变，但是只有当我改变高度时，背景图像才会改变。当我更改宽度时，它是相同的。

感谢您的所有帮助

HTML:    
         <div class="wrap-hero-content">
              <div class="hero-content">
                <span class="typed"></span>
              </div>
          </div>
          <div class="mouse-icon margin-20">
            <div class="scroll"></div>
          </div>

CSS:    #home {
        background: url('../images/testimonial-bg.jpg');
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        min-width: 100%;
        min-height: 100%;
        height: 100%;
        width: 100%;
        display: block;

        .wrap-hero-content{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        }

        .hero-content{
        position: absolute;
        text-align: center;
        min-width: 110px;
        left: 50%;
        top: 58%;
        padding: 65px;
        outline-offset: 8px;
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        }

Answer 1

尝试添加以下代码：background: url('../images/testimonial-bg.jpg') center no-repeat; 我添加了背景位置属性，该属性等于 center 。也许会对您有帮助

#home {
    background: url('../images/testimonial-bg.jpg') center no-repeat;

    -webkit-background-size: cover;
    background-size: cover;

    height: 100%;
    width: 100%;
    display: block
}

Answer 2

使用此CSS

#home {
        background: url('../images/testimonial-bg.jpg');
        -webkit-background-size: 100%;
        -moz-background-size: 100%;
        -o-background-size: 100%;
        background-size: 100%;
        min-width: 100%;
        min-height: 100%;
        height: 100%;
        width: 100%;
        display: block;
}

仅在高度上更改图像尺寸，在宽度上不更改

2 个答案: