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

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

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

已邀请:

4 个回复

梆晨灸碾

您可以使用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

递劝臼类洪

正如三十点所说，您可以使用CSS3background-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

要回复问题请先登录或注册

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

4 个回复

发起人

fluid

image

css

问题状态

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

与内容相关的链接

4 个回复

发起人

fluid

image

css

问题状态