Question

我使用宽度：100％和高度：250px。如果我选择小于250px的任何东西，它会切断我的横幅。如果我改变图像的大小就会扭曲。有没有办法调整大小而不切断或扭曲，但保持相同的比例？这是我的CSS：

#banner {
    background-image: url('banner.jpg') no-repeat;
    width: 100%;
    height: auto;
}
header {
    position:fixed;
    width: 100%;
    padding-bottom: 30px;
}
nav ul li {
    display: inline;
    position: relative;
    left: 245px;
    padding: 20px;
    padding-bottom: 200px;
}

这是我的HTML：

<header class="main-header">
    <div id="banner"></div>
    <div id="nav-menu">
        <nav>
            <ul>
                <li>Home</li>
                <li>Items</li>
                <li>About</li>
                <li>Contact</li>
            </ul>
        </nav>
    </div>
</header>

Answer 1

你想要的是CSS background-size属性。将值设置为contain将调整图像大小以适合其容器。此外，您可以设置背景图像位置（如果您不希望它居中）：

#banner {
    background-image: url('banner.jpg') no-repeat;
    width: 100%;
    height: auto;
    background-size: contain;
}

<强>包含

一个关键字，可以尽可能地缩放图像并保持图像宽高比（图像不会被压扁）。图像是letterboxed 在容器内。当图像和容器有不同尺寸，空白区域（左/右上/下）是充满了背景色。图像自动居中除非被背景位置等其他财产覆盖。

如何在不切断横幅的情况下重新调整横幅尺寸？

1 个答案: