Question

我花了几天时间试图找到在不同屏幕尺寸上正确显示背景图像的最佳方法。

以下是工作示例http://mobile-development.ru/。这是JSFiddle。但在网站上可以看得更清楚。

问题是如下。您可能会看到我的初始图片尺寸为1920x920 我有以下SASS类标题图片。

$header-min-height: 920px;
.l-header {
  min-height: $header-min-height;
  height: 110%;
  width: 100%;
  @include background-size(cover);
  background-position: center top;
  background-repeat: no-repeat;
  background-image:url('../images/background-header.jpg');
  @include respond-to-less-than(desktops) {
    min-height: $header-min-height*1.6;

  }
  @include respond-to-less-than(tablets) {
    min-height: $header-min-height*1.8;
  }
}

初始标题背景图片看起来不错（不是很好但是还可以）。内容适合。

但是当我的屏幕尺寸开始减小时，由于background-size属性图像开始缩放。此外，正如您可以看到更小的屏幕，我增加min-height以适应图像内的内容。因为在小屏幕上，行中的项目占全宽。

正如你所看到的，因为图像比例和图像的变焦质量变得很糟糕。

在方形图像的情况下，我可以拍摄全高度的图像并仅显示其中的一部分，另一部分将隐藏在下一个div下直到需要。

但是在我的情况下，我的图像底部有圆形边框，仅使用CSS无法达到相同的效果。

我想得到那样的结果

为了拍摄这张照片，我刚裁剪的内容与初始图片的前一个截图部分相同。

喜欢那个

我不知道如何获得理想的结果，使图像在不同的屏幕上看起来很好。我已经尝试了很多不同的技巧，但仍然如你所见。

请说明获得所需结果的可能方法，是否有根据屏幕尺寸更改不同图像的方法（如srcset）。最糟糕的是，在小于990px图像的屏幕上可能没有圆角。如果有任何建议如何让它看起来不错，我将非常感激。

非常感谢。

Answer 1

尝试通常改变您的布局：

.l-header {
    width: 100%;
    height:auto;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-image: url(../images/background-header.jpg);
}
@media only screen and (max-width: 992px)
.l-header {
    background-image: url(../new picture with portrait orienbtation);
}
.l-header-wrapper {
    width: 100%;
    height: auto;
}
.l-our-services {
    padding: 50px 0;
}

删除此规则：

@media only screen and (max-width: 992px)
.l-header {
    min-height: 1472px;
}
.l-our-services {
    padding-left: 0; 
    padding-right: 0;
    padding-top: 50px;
}
.l-header-wrapper {
    width: 100%;
    height: 100%;
}

我看到唯一的方法：使用另一张照片（纵向）进行移动布局。您的新图片必须具有大约1500px的高度才能正确查看布局。宽度 - 约950px

Answer 2

我会通过更改HTML的结构来解决这个问题，以便拥有一个固定的背景，其中包含星星和图标。对于弯曲的底部边缘，我将使用SVG白色元素而不是在图像上使用它。

这样的事情可能是：

<body>
    <section class="fixed_background"></section>
        <header id="header-main" class="header l-header container-fluid">
          Services content here...
        </header>
    <section class="curvedEdge"></section>
    <main id="main-content" class="main-content l-main-content">
          Some other content here
    </main>
    <footer id="footer-main" class="footer-main l-footer-main">
</footer>
</body>

我做了

Check this JSFiddle fork。没有抛光，但这就是想法。我清空.l-header并在最后添加了新的CSS规则。

根据背景大小封面

2 个答案: