我有一个网站(g-floors.eu),我想使背景(在css中,我已经为内容定义了bg-image)也响应。不幸的是,我真的不知道如何做到这一点,除了我能想到的一件事,但这是一个相当好的变通办法。创建多个图像,然后使用css屏幕大小来改变图像,但我想知道是否有更实用的方法来实现这一点。

基本上我想要实现的是图像(水印'G')自动调整大小,而不显示更少的图像。当然,如果可能的话

链接:g-floors.eu

到目前为止的代码(内容部分)

#content {
  background-image: url('../images/bg.png');
  background-repeat: no-repeat;
  position: relative;
  width: 85%;
  height: 610px;
  margin-left: auto;
  margin-right: auto;
}

当前回答

自适应的平方比与jQuery

var Height = $(window).height();
var Width = $(window).width();
var HW = Width/Height;

if(HW<1){
      $(".background").css("background-size","auto 100%");
    }
    else if(HW>1){
      $(".background").css("background-size","100% auto");
    }

其他回答

如果你想让整个图像显示不受纵横比影响,那么试试这个:

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center;

这将显示整个图像,无论屏幕大小。

只需两行代码,它就能工作。

#content {
  background-image: url('../images/bg.png');
  background-size: cover;
}
    <style> 
         * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#res_img {
  background: url("https://s15.postimg.org/ve2qzi01n/image_slider_1.jpg");
  width: 100%;
  height: 500px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  border: 1px solid red;
}

@media screen and (min-width:300px) and (max-width:500px) {
  #res_img {
    width: 100%;
    height: 200px;
  }
}

    </style>

<div id="res_img">
</div>

CSS:

background-size: 100%;

这应该能奏效!:)

background: url(/static/media/group3x.6bb50026.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: top;

位置属性可用于根据您的需要对齐顶部底部和中心,背景大小可用于中心裁剪(覆盖)或完整图像(包含或100%)