Question

我正在使用来自css提示和技巧的代码来覆盖背景图像。问题是它重新调整图像以适应宽度和高度并改变纵横比。我希望背景图像重新缩放到全屏宽度，然后仅裁剪高度（从图像顶部开始，而不是中心）以覆盖视图端口。这样，图像宽高比就会保持不变。

我遇到的第二个问题是它似乎不起作用，除非我使用图像的FQDN而不是下面的网址。

html {
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;
}

Answer 1

而不是

background-size: cover;

你想要使用

background-size: 100% auto;

封面会将图像拉伸到最小尺寸，这样它的宽度和高度都可以放在内容区域内，因此就是问题所在。详细了解over here。

Answer 2

使用cover时，图像宽高比不会更改。但是，我相信你想要的是修复图像的底部，因为你告诉你要从顶部而不是中心裁剪它，我认为你不想从顶部和底部说出来。

如果你想让底部保持在底部（也许是一片天空可以避免的大草原？）那么你需要将定位从center bottom更改为center center。

如果按照Nit建议将其设为100％自动，那么，在html元素的高/宽比大于图像的窗口上，您会看到顶部的空白区域，这可能是您想要的，尤其是如果你使用的图像在顶部变成相同的颜色......

对于你的第二个问题，它不是fqdn，它是你路径的相对/绝对引用。根据你的CSS，应该有一个图像文件夹，你的css文件中有一个bg.jpg。

index.html
main.css
images/
    bg.jpg

Answer 3

我会用JS来代替。 CSS似乎还没有很好地处理宽高比。

尝试这样的事情：

首先，创建一个div并将图像放入其中

<div class="big-image">
   <img src="path.jpg" width="1000" height="1000" alt="whatever">
</div>

然后在CSS中执行此操作：

.featuredImage img {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
}
/* this class will be added via JS */
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

最后，你的JS

  var theWindow = $(window),
  $bg = $(".big-image img"), // Use your image selector here.
  aspectRatio = $bg.width() / $bg.height();

  $bg.removeAttr('width');
  $bg.removeAttr('height');

  function resizeBg() {
    if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
      $bg
        .removeClass()
        .addClass('bgheight');
    } else {
      $bg
        .removeClass()
        .addClass('bgwidth');
    }
  }
  theWindow.resize(function() {
    resizeBg();
  }).trigger("resize");

如果这是有道理的，请告诉我。不完全是我知道的CSS，但它是一个解决方案

css背景图像调整宽度裁剪高度

3 个答案: