image - 有没有办法为背景图像使用最大宽度和高度？

Question

就这么简单。

将我的布局移动到一个流动的领域，处理可扩展的图像。使用 img 标签并将 max-width 设置为 100% 效果很好，但我宁愿使用将图像设置为背景的 div。

我遇到的问题是图像无法缩放到它在背景中的 div 的大小。有什么方法可以将标记添加到背景代码以将其设置为容器的 100% 宽度？

#one {
    background: url('../img/blahblah.jpg') no-repeat;
    max-width: 100%;
}

Answer 1

正如三十点所说，您可以使用 CSS3background-size语法：

例如：

-o-background-size:35% auto;
-webkit-background-size:35% auto;
-moz-background-size:35% auto;
background-size:35% auto;

然而，正如三十多点所说，这在 IE6、7 和 8 中不起作用。

有关更多信息，请参阅以下链接：http background-size: //www.w3.org/TR/css3-background/#the-background-size

Answer 2

你可以这样做background-size：

html {
    background: url(images/bg.jpg) no-repeat center center fixed; 
    background-size: cover;
}

cover除了您可以设置的值之外，还有很多值background-size，看看哪一个适合您：https ://developer.mozilla.org/en-US/docs/Web/CSS/background-size

规格：https ://www.w3.org/TR/css-backgrounds-3/#the-background-size

它适用于所有现代浏览器：http ://caniuse.com/#feat=background-img-opts

Answer 3

看起来您正在尝试缩放背景图像？下面的参考资料中有一篇很棒的文章，您可以在其中使用 css3 来实现这一点。

如果我错过了这个问题，那么我谦卑地接受投票。（不过还是很高兴知道）

请考虑以下代码：

#some_div_or_body { 
   background: url(images/bg.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

这将适用于所有主要浏览器，当然它在 IE 上并不容易。但是有一些解决方法，例如使用 Microsoft 的过滤器：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

通过使用 jQuery，您可以放心地使用一些替代方案：

HTML

<img src="images/bg.jpg" id="bg" alt="">

CSS

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

jQuery：

 $(window).load(function() {    

var theWindow        = $(window),
    $bg              = $("#bg"),
    aspectRatio      = $bg.width() / $bg.height();

function resizeBg() {

    if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
        $bg
            .removeClass()
            .addClass('bgheight');
    } else {
        $bg
            .removeClass()
            .addClass('bgwidth');
    }

}

theWindow.resize(resizeBg).trigger("resize");

});

我希望这有帮助！

Src：完美的整页背景图像

Answer 4

不幸的是，CSS 中没有 min（或max）-background-size，您只能使用 background-size. 但是，如果您正在寻找响应式背景图像，您可以使用属性Vmin的Vmax单位background-size来实现类似的效果。

例子：

#one {
    background:url('../img/blahblah.jpg') no-repeat;
    background-size:10vmin 100%;
}

这会将高度设置为垂直或水平的较小视口的 10%，并将宽度设置为 100%。

在此处阅读有关 CSS 单元的更多信息：https ://www.w3schools.com/cssref/css_units.asp

Answer 5

这就是您正在寻找的解决方案！

background-size: 100% auto;