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可以使用一些替代方案，而且可以使用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：Perfect Full Page Background Image

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

很遗憾没有min（或max） - CSS中的背景大小只能使用 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;

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

5 个答案:

例如：