Question

我遇到了问题，需要更有经验的开发人员提供建议。

这是我的HTML：

<body>
  <div id="header-main" class="header container-fluid" style="background-image:url('https://wallpaperscraft.com/image/star_nebula_glow_94217_1920x1080.jpg');">
  <div class="container">
  </div>
  </div>
</body>

和CSS代码：

html,body {
  height: 100%;
  width: 100%;
}

.header {
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  height : 100%;
}

小提琴：JSFiddle

它在JSFiddle中不可见，但我会尝试解释。我需要将图像设置为背景以适合此div内的所有内容并相应地缩放图像。

效果很好，但由于background-size:cover，当屏幕尺寸发生变化时，它会缩放图像的一部分。除了小屏幕上的图像质量外，一切都很完美，但在iPhone 4上变得模糊。所以我想知道是否有任何方法可以剪切部分图像而不进行缩放，或者在这种情况下如何保存质量。也许这样的任务有一些最佳实践。（与每个特定屏幕尺寸的图像集一样）。

请建议如何解决此问题或获得类似结果的其他可能方法？

如何在不缩放背景的情况下使用剪辑

0 个答案: