Question

嘿伙计，所以我的问题很简单，我不知道如何解决它。

我基本上试图缩放此图像以适应div宽度，但由于某种原因它不起作用。由于某种原因，宽度和高度将保持原始尺寸。

<body>
        <div id="header"> 
            <div>
                <ul id="mymenu">
                    <li><a href="text">homepage</a></li>
                    <li><a href="text">blog</a></li>
                    <li><a href="text">photos</a></li>
                    <li><a href="text">about</a></li>
                    <li><a href="text">links</a></li>
                    <li><a href="text">contact</a></li>
                </ul>
            </div>

            <div id="bgfix"> <!-- here is the image -->

            </div>
        </div>
    </body>

这就是它的HTML，应该采用mymenu尺寸并使图片宽度为100％。

CSS代码

#bgfix {
    margin-top: 20px;
    background: url("../img/home_bg.jpg");
    background-repeat: no-repeat;
    width: 100%;
    height: 250px;

}

Answer 1

div的背景图片不会自动缩放以覆盖整个div。

如果您想要缩放背景，可以添加background-size:cover;或background-size:contain;（取决于您希望它的样子）。

在此处阅读有关此媒体资源的详情：https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Answer 2

使用此：

#bgfix {
    margin-top: 20px;
    background: url("../img/home_bg.jpg");
    background-repeat: no-repeat;
    background-size: 100% auto;
}

这将使背景图像成为其父级的全宽，并自动调整高度以保持图像的正确比例。或者，您可以使用background-size: cover，它将填充容器，但切断一些图像，或background-size: contain;，这将缩放图像以适应容器，但留下一点空间。在所有情况下，您可能希望添加background-position: center center;以使图像垂直和水平居中。

CSS图像大小不会改变

2 个答案: