13

我有一个 1000px X 600px 的图像。我想将它用作 div 的响应式背景，但想将最小宽度设置为 1000px，尽管浏览器窗口很小。

这令人沮丧，因为似乎没有一种简单的方法来定义最小值。宽度。

如果我使用背景尺寸：封面 - 由于某种原因，图像默认大于 1000 像素。

请帮忙

4

4 回答 4

18

如果可以选择媒体查询，您可以为宽度小于 1000 像素的浏览器视口设置媒体查询。

假设您的 HTML 视口已设置：

<meta name="viewport" content="width=device-width">

你的 div 被命名为'bg'：

<div class="bg"></div>

在您的 CSS 中：

.bg {
    width: auto; /* Scale the div to the parent width */
    height: 900px; /* The div needs some height to be visible */
    background-image: url(bg.png); /* This is your background image */
    background-size: 100%; /* Always size the image to the width of the div */
    background-position: top; /* Position the image to the top center of the div */
}

/* For any viewports less than 1000px wide */
@media (max-width: 1000px) {

    .bg {
        background-size: 1000px 600px; /* Force the image to its minimum width */
    }

}
于 2013-05-21T21:02:52.300 回答
7

现在可以选择background-size仅缩放图像，直到图片达到实际高度/宽度。这样，您不必设置最小宽度或任何东西。

在您的 CSS 中：

body {
  background-size: cover;
}

参考：https ://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Values

于 2016-08-14T06:08:29.380 回答
3

我有同样的问题。以下代码对我有用。我只需要在同一个元素中添加一个最小宽度。这里我只是使用了 html 元素，我会假设使用 body 元素会更常规

     /* CSS Style Sheet */

 html    { background-image:url(example.JPG);
                    background-size:cover;
                    min-width:1000px;}

我希望这有帮助，

于 2015-01-24T02:34:59.347 回答
1

您可以calc使用background-size：

.bg {
    background-size: calc(max(100%, 1000px));
}

calc也适用于background-position, 一侧或两侧

于 2020-04-05T11:24:10.500 回答