响应式图像调整大小并使用一组规则选择性地裁剪其宽度

Question

我希望背景图像出现在顶部并完全覆盖页面的宽度。如您所见，图像又宽又短 - https://i.imgur.com/aJb6eBr.jpg。这应该是页面的标题图片，页面内容显示在其下方。

如果浏览器的宽度大于图像的原始宽度，则图像的宽度和高度应按比例放大（连同其容器 - 从而将出现在图像下方的页面内容向下推）。

如果浏览器的宽度小于图像的原始宽度，则图像应保持其原始大小而不缩小，并从两侧进行裁剪直到每侧达到 15% 的裁剪（您可以看到图像两边都有相当宽的绿色区域，可以安全裁剪）。

棘手的部分是，一旦从每一侧达到 15% 的裁剪，我希望图像开始与浏览器的宽度成比例地缩小，因此始终可以看到中间 70% 的图像，并且图像将永远不会从每侧裁剪超过 15%。

图像（及其容器）的高度应与图像的宽度成比例地自动重新缩放。如果图像的高度（连同其容器）缩小到小于其原始大小，则页面内容会被向上推，因此页面内容与图像之间的距离始终保持不变。

我正在寻找与此类似的干净解决方案（最好仅使用 CSS）： https://demodern.de/projekte/mediengruppe-rtl

各位有什么想法吗？

Answer 1

就使用 CSS 而言，让一切按您的需要工作非常简单。为了做到这一点，您可以使用原样的图像，并在父元素的背景上使用相同的图像。但是您将不得不调整您的 CSS 以仅使用此图像。如果您尝试使用其他图像 - 您将不得不调整填充或媒体查询。对特定图像一次有效的解决方案，但仍然根本不使用 JS，这很棒。关于两次引用图像 - 这对浏览器来说不是问题。它只会对单个唯一媒体资产发出一个 http 请求，因此从这个角度来看不会出现性能问题。 以下是您可以做自己想做的事情的一种方式：

.wrapper {
  background: url(/images/_m1NuVvd.jpeg) 50% 50% no-repeat;
  background-size: cover;
  overflow: hidden;
  position: relative;
  padding-top: 38%;
}
.wrapper img {
  transform: translateX(-50%);
  left: 50%;
  position: relative;
  min-width: 100%;
  display:none;
}
@media screen and (min-width: 1338px) {
  .wrapper {
    padding-top: 0;
  }
  .wrapper img {
    display: inline-block;
    vertical-align: top;
  }
}
<div class="wrapper">
  <img src="/images/_m1NuVvd.jpeg" />
</div>

确保使用正确的图像路径而不是 /images/_m1NuVvd.jpeg。 顺便说一句，将来最好以某种方式提供指向图像的链接，以便在 jsfiddle 中重用这些链接。 Dropbox 不允许通过该链接使用图片。 最好的祝福