动态背景在网页中调整大小

Question

我无法弄清楚如何根据图像降低云背景的高度，这样即使在移动时，手总是触摸云背景底边。

HTML：

    <div class="slidersection">
     <div class="sp-photo">
      <div class="sp-photo-content">
       <a target="_blank" href="https://play.google.com/store/apps/developer?id=IDSstudio"><img style="border:0;" src="images/slider/slogan.png" alt="IDSstudio" class="centered"></a>
      </div>
     </div>
    </div>

CSS：

.sp-photo {
position: relative;

margin: 0px auto;

width: 100%;
max-width: 1000px;

min-width: 100%;

height: 500px;
}

.sp-photo-content {
background: url(../images/slider/back.jpg) no-repeat scroll 0 0;

position: relative;
width: 100%;

/* background-size: cover; */
height: 100%;
overflow: hidden;
background-position: center;
}

img.centered {display:block; margin-left: auto; margin-right: auto;}

.slidersection {
display: block;
padding-top: 80px;
background: rgba(255, 255, 255, 0);
}

Answer 1

快速浏览一下：

使用媒体查询删除高度：500px，以便.sp-photo-content div符合图像的高度。

@media screen and (max-width: 640px){
  .sp-photo-content{height:auto;}
}

设置图像的背景大小以适合屏幕宽度和底部位置

.sp-photo-content{
  background-size: 100% auto;
  background-position: center bottom; 
}

使用jsfiddle玩这会更容易;）

Answer 2

我相信你需要在这种情况下使用JQuery（JavaScript），CSS有局限性。

试试此链接：How to resize an image to fit in the browser window?

Answer 3

我这样做是为了解决这个问题：

CSS：

.sp-photo {
position: relative;

margin: 0px auto;

width: 100%;
max-width: 1000px;

min-width: 100%;

}



.sp-photo-content {
background: url(../images/slider/back.jpg) no-repeat scroll 0 0;

position: relative;
width: 100%;

/* background-size: cover; */
overflow: hidden;
background-position: center bottom; 

}

Answer 4

您想要背景图片是100％吗？如果是这样的话，你可以这样做：

.sp-photo-content {
    background: url(../images/slider/back.jpg) no-repeat scroll 0 0;
    position: relative;
    width: 100%;
    height: 100%; 
    overflow: hidden;
    background-position: center;
    background-size: 100%;
}

然而，更好的方法是在你的css中使用媒体查询来分离移动和桌面的一些css。我还建议为移动设备上传该图片的较小版本 - 它将是移动浏览器下载的大小。

以下代码显示了如何编写媒体查询：

/*for the phone - assuming back-mobile.jpg is the clouds background with a size of 480px */
@media only screen and (max-width : 480px) {
    .sp-photo-content {
        background: url(../images/slider/back-mobile.jpg) no-repeat scroll 0 0;
    }
}

/*for everything else */
@media only screen and (min-width : 481px) {
    .sp-photo-content {
        background: url(../images/slider/back.jpg) no-repeat scroll 0 0;
    }
}