Question

所以我有一个背景图片，我将它设置为宽度为100％，高度为700px。它有附件固定因为我试图产生视差效果。问题是，当我改变浏览器的大小时，图片会失去其宽高比。那么我如何防止它变化，同时保持响应？

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

P.S。我的下一个媒体查询断点是1280像素，所以背景不会改变。我也知道我正在练习一些不好的CSS，但它只是一个培训网站，不会公开。

Answer 1

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

background-size: cover;

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

您也可以使用背景位置

background-position: center;

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

如何保持纵横比不变？

1 个答案: