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

那很简单

将我的布局移动到一个流动的区域，处理可缩放的图像。使用img标记并将max width设置为100%效果很好，但我更愿意使用一个以图像设置为背景的div

我遇到的问题是，图像无法缩放到背景中的div大小。有没有办法将标记添加到背景代码中，将其设置为其容器的100%宽度

#一个{
背景：url（'../img/blahblah.jpg'）不重复；
最大宽度：100%；
}

您可以使用

背景大小执行此操作：

html{
背景：url（images/bg.jpg）无重复中心固定；
背景尺寸：封面；
}

除了
cover
之外，还有很多值可以设置
background size
以查看哪个值适合您：

规格：

它适用于所有现代浏览器：
正如thirtydot所说，您可以使用CSS3
背景大小
语法：

例如：

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

然而，正如thirtydot所述，这在IE6、7和8中不起作用

有关背景尺寸的更多信息，请参见以下链接：
看起来您正在尝试缩放背景图像？下面的参考资料中有一篇很棒的文章，您可以使用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

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");

});

$（窗口）.load（函数（）{
var theWindow=$（窗口），
$bg=$（“#bg”），
aspectRatio=$bg.width（）/$bg.height（）；
函数resizeBg（）{
如果（（theWindow.width（）/theWindow.height（））

我希望这有帮助

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

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

阅读更多关于css单元的信息：
这是您正在寻找的解决方案

background-size: 100% auto;

Ef'em.我不需要在IE7中进行测试。。我也不觉得把8个扔进垃圾堆里有罪。谢谢你的帮助！我听到了。不到10%的访客。。这不是很多：）仅供参考-我确实感到内疚，所以我加入了一些Modernizer类，以便在不支持背景大小的情况下重新调整图像大小。
背景大小
实际上不是设置
最大宽度
或
最大高度
的方法。不是说
img
有
max width
和
max height
属性。@nOjan:没人说有。谢谢你的回复！请注意，你应该在这里，在这个网站上发布有用的答案，否则你的帖子有被删除的风险。如果您愿意，您仍然可以包含该链接，但仅作为“参考”。答案应该是独立的，不需要链接。嗨，安德鲁，很好看！我修改了我的答案以符合要求。你的答案应该在这里被接受<代码>背景尺寸：封面在
背景尺寸
声明中，票面宽度不是在高度之前吗？
 $(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");

});

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

background-size: 100% auto;