如何保持纵横比不变？

Question

所以我有一个背景图像，我将其设置为 100% 的宽度和 700 像素的高度。它具有固定的附件，因为我试图制作视差效果。问题是当我更改浏览器的大小时，图片会失去其纵横比。那么如何在保持响应的同时保持它不变呢？

<header>
    <nav>
        <ul>
            <li id="back">
                <a href="#" id="back"><img src="../images2/back.png" /></a>
            </li>

            <li id="name">
                <h1>Person Name</h1>
            </li>
        </ul>
    </nav>
    <section id="iImage">

    </section>
</header>


#iImage{
width: 100%;
height: 700px;
background-image: url(../images2/DerekDesktop.jpg);
background-size:  100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}

附： 我的下一个媒体查询断点是 1280 像素，所以在此之前背景不会改变。 我也知道我在练习一些糟糕的 CSS，但它只是一个培训网站，不会公开。

Answer 1

将背景大小更改为覆盖而不是 100% 100%

background-size: cover;

编辑- 您将宽度设置为 100%，将高度设置为 700 像素。因此，当您调整浏览器窗口的大小时，它基本上是保持宽度和高度，从而破坏了图像的纵横比。所以你必须以一种方式妥协。删除宽度或高度。

你也可以使用背景位置

background-position: center;

此代码将对齐您的图像中心。