如何根据桌面和移动设备制作背景图片尺寸?

时间:2018-02-18 22:00:41

标签: html css html5

我希望在我的主页上有一个背景图片,它在桌面上是全宽的,但随着屏幕尺寸缩小,图像右侧的越来越少会消失(但总是显示左手边缘以及图像左侧的对象。)

我的CSS代码如下:

.sm-img-bg-fullscr {
  background-position: 0% 0px;
  background-size:auto;

  width: 100%;
  display: block;
  position: relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  background-repeat: no-repeat;
}

和调用此类的html如下;

<div class="sm-img-bg-fullscr parallax-section" style="background-image: url(assets/system/backgroundimage.jpg)" data-stellar-background-ratio="0.5">

我尝试调整背景大小变量和背景位置变量,但没有运气。使用的图像是1920 x 1080。

我想知道当屏幕宽度足够大时,CSS参数的哪些组合将允许显示完整图像,并且随着屏幕尺寸缩小,它会移除越来越多的图像右侧,只能使图像的左侧可见。

3 个答案:

答案 0 :(得分:0)

你试过这个吗?

background-position: center;

答案 1 :(得分:0)

为什么不使用媒体查询来调整某些屏幕尺寸的图像背景?

我们所做的只是调整background-position

&#13;
&#13;
body {
margin: 0; padding: 0}

*{
box-sizing:border-box}

.image {
  width:100vw;
  height:100vw;
  background-image:url("https://upload.wikimedia.org/wikipedia/commons/9/94/Cirrus_clouds_mar08.jpg");
  background-repeat:no-repeat;
  background-position:center center;
  background-size: cover
}

@media only screen and (min-width:1px) and (max-width:700px) {
  .image {
    background-position:left center;
  }
}
&#13;
<div class="image">

</div>
&#13;
&#13;
&#13;

答案 2 :(得分:-1)

在CSS中试试这个

{background-size: auto;}  

或使用max-width: ??.px

尝试内联样式