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

Question

那么简单.

将我的布局移动到流动的区域,处理可伸缩的图像.使用img标签并将max-width设置为100%可以很好地工作,但我宁愿使用div将图像设置为其背景.

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

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

Answer 1

正如thirtydot所说,你可以使用CSS3 background-size语法:

例如:

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

但是,正如thirtydot所述,这在IE6,7和8中不起作用.

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

Answer 2

看起来你正在尝试缩放背景图像？参考文献中有一篇很棒的文章,您可以使用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 3

你可以这样做background-size:

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

除了cover您可以设置的值之外还有很多其他值background-size,请参阅哪个值适用于您: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

Answer 4

Unfortunately there's no min (or max)-background-size in CSS you can only use background-size. However if you are seeking a responsive background image you can use Vmin and Vmaxunits for the background-size property to achieve something similar.

example:

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

that will set the height to 10% of the whichever smaller viewport you have whether vertical or horizontal, and will set the width to 100%.

Read more about css units here: https://www.w3schools.com/cssref/css_units.asp