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

Question

就这么简单。

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

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

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

Answer 1

正如三十点所说，您可以使用 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 中不起作用。

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

Answer 2

您可以使用 background-size 来做到这一点：

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

除了 cover 之外，您还可以将 background-size 设置为很多值，看看哪些一个适合你： https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

规范：https://www.w3.org/TR/css-backgrounds-3/#the-background-size

适用于所有现代浏览器：http://caniuse.com/#feat=background-img-opts

Answer 3

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

});

我希望这会有所帮助！

源：完美的整页背景图片

Answer 4

不幸的是，CSS 中没有 min （或 max）-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

Answer 5

这就是您正在寻找的解决方案！

background-size: 100% auto;

Answer 6

使用 :before 或 :after 和 ma​​x-height

section {
  height: 100vh;
  width: 100%;
  background-color: #222;
}

section::before {
  content: ' ';
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 50%;
  height: 100%;
  max-height: 100px;
  transform: translateX(-50%);
  opacity: 0.8;
  background-image: url('https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg');
  background-repeat: no-repeat;
  background-position: 50% bottom;
  background-size: contain;
}

<section></section>