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

如何解决有没有办法为背景图片使用最大宽度和最大高度？

| 这么简单。 将我的布局移动到一个可变的区域，处理可伸缩图像。使用img标签并将max-width设置为100％可以完美地工作，但是我宁愿使用div作为背景图像。 我遇到的问题是图片无法缩放到其背景中的div大小。有什么方法可以将标记添加到后台代码中，以将其设置为容器宽度的100％？

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

    

解决方法

        您可以使用

background-size

进行此操作：

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

您可以将ѭ1设置为

cover

以外的许多值，看看哪个对您有用：https://developer.mozilla.org/en/CSS/background-size 规格：https：//www.w3.org/TR/css-backgrounds-3/#the-background-size 它适用于所有现代浏览器：http://caniuse.com/#feat=background-img-opts     ,        正如三十点所说，您可以使用CSS3

background-size

语法： 例如：

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

但是，正如三十点所述，这在IE6、7和8中不起作用。 有关the1 for的更多信息，请参见以下链接： http://www.w3.org/TR/css3-background/#the-background-size     ,        您似乎正在尝试缩放背景图片？参考波纹管中有一篇很棒的文章，您可以在其中使用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：完美的整页背景图像     ,        不幸的是，CSS中没有

min

（或

max

）-background-size，您只能使用

background-size

。但是，如果您要寻找响应式背景图像，则可以对

background-size

属性使用

Vmin

和

Vmax

单位来实现类似的效果。 例：

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

会将高度设为您所拥有的较小视口（垂直或水平）的10％，并将宽度设为100％。 在此处阅读有关CSS单元的更多信息：https://www.w3schools.com/cssref/css_units.asp