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

4 回答

• 9

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

  回复于 2024-05-16T12:57:25+08:00
• 27

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

  For example:

  -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

  回复于 2024-05-16T12:57:25+08:00
• 4

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

  回复于 2024-05-16T12:57:25+08:00
• 13

  不幸的是，CSS中没有 min （或 max ） - 背景大小，你只能使用 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

  回复于 2024-05-16T12:57:25+08:00