背景图设置background-position和background-size的问题。

Mesopotamia
  • 98

html:

<section class="banner">
  <div id="banner"></div>
</section><!-- banner -->

css:

  .banner{
    #banner{
      height: 350px;
      background-image: url('../images/banner.png');
      background-repeat: no-repeat;
      background-position: top center;
      background-size: cover;
    }
  }

现在的问题是设置了background-size:cover;(按目标div的较小边进行缩放,也就是按高度进行缩放),但是当我改变窗口宽度时,背景图高度并没有保持在350px,而是在自由缩放。
想问下这个是怎么回事呢?

回复
阅读 4.8k
3 个回答

cover 是覆盖的意思,而且这个属性表示的等比缩放,图片的宽高比是不变的,如果你宽度比图片大图片就是按比例方大,当然高度不会一直是你设置的350px,按你的意思应该像这样写:

.banner{
 #banner{
  height: 350px;
  background-image: url('../images/banner.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
  }
}

COVER是将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器

此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 这是定义 所以应该是按照最小的边自由缩放到铺满整个背景

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏