jquery - 根据具有背景大小封面的内容固定图像大小比例

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​​ 的屏幕上图像可能没有圆 Angular 。 如果有任何帮助建议如何使它看起来更好，我将不胜感激。

非常感谢。

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%;
}

我看到了唯一的方法:使用另一张图片(纵向)进行移动布局。 您的新图片必须具有大约 1500 像素的高度，以便在您的布局中正确查看。宽度 - 大约 950px