首页 文章

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

提问于
浏览 次
5

我正在使用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;
}
css css3

3 回答

  • 0

    代替

    background-size: cover;

    你会想要使用

    background-size: 100% auto;

    封面会将图像拉伸到最小尺寸，使其宽度和高度都可以适合内容区域，因此您的问题 . 查看有关over here的更多信息 .

    回复于
  • 10

    我会用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，但它是一个解决方案

    回复于
  • 0

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

    如果你想保持底部的底部，（也许是一片天空可以避开的草地？）那么你需要从 center center 改变定位到 center bottom .

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

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

    index.html
main.css
images/
    bg.jpg
    回复于

相关问题