Html 如何使用 background-size 设置最小宽度

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16679221/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:39:19  来源:igfitidea点击:

How to set a minimum width with background-size

htmlcss

提问by Gregg

I have an image that is 1000px X 600px . I want to use it as a responsive background for a div but would like to set a minimum width of 1000px despite how small the browser window is.

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

This is frustrating because there doesn't seem to be a simple way to define a min. width.

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

If I use background-size: cover - for some reason, the image is defaulted much larger than 1000px.

如果我使用 background-size:cover - 出于某种原因,图像默认大于 1000px。

please help

请帮忙

回答by Craig Phares

If media queries are an option, you can setup a media query for browser viewports smaller than 1000px wide.

如果媒体查询是一个选项,您可以为小于 1000px 宽的浏览器视口设置媒体查询。

Assuming your HTML viewport is set:

假设您的 HTML 视口已设置:

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

And your div is named 'bg':

你的 div 被命名为“bg”:

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

In your CSS:

在你的 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 */
    }

}

回答by Chris Barrell

There's now an option for background-sizeto onlyscale the image until the picture has met it actual height/width. This way, you don't have to set a min-width or anything.

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

In your CSS:

在你的 CSS 中:

body {
  background-size: cover;
}

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

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

回答by Maxfield Solar

I had the same problem. The following code worked for me. I just had to add a min width in the same element. Here I just used the html element, I would assume that it would be more conventional to use the body element

我有同样的问题。以下代码对我有用。我只需要在同一个元素中添加一个最小宽度。这里我只使用了 html 元素,我认为使用 body 元素会更传统

     /* CSS Style Sheet */

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

I hope this helps,

我希望这有帮助,

回答by Alexander Goncharov

You can use calcin background-size:

您可以calcbackground-size

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

calcworks also with background-position, for one side, or both sides

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