html - 仅在高度而不是宽度上更改图像的大小

Question

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

正常：https ://imgur.com/a/GcpEnPy

更改宽度：https ://imgur.com/a/DrS3k8E

感谢你的帮助

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%);
        }

标签： htmlcssresponsive-design

Answer 1

尝试添加以下代码：background: url('../images/testimonial-bg.jpg') center no-repeat; 我添加了background-position属性等于center。也许它会帮助你

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

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

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