使用 CSS 裁剪和缩放图像的特定区域（响应式）

Question

我想向用户展示图片的特定部分。理想情况下，我可以在服务器上裁剪图像，但我无法为这个应用程序这样做。我想要一个解决方案，让用户看起来好像图像实际上是在服务器上裁剪的，这样它可以随着其包含的元素变大或变小而正确缩放。

具体来说，假设我的图像是 200px 宽 x 300px 高，我想显示图像的 x 区域从 0px 到 200px，y 区域从 75px 到 225px。因此，我想要一个 200px 宽 x 150px 高的“有效图像”。

我假设这将涉及背景位置和大小，但我无法弄清楚如何使用这些，以便我可以：

1. 仅显示图像的所需区域。
2. 可以放置在具有流体宽度（例如宽度：50%）的容器中，并相应地改变尺寸。

我在这里提供了一个到目前为止我尝试过的示例：

http://codepen.io/anon/pen/maCvd

该示例具有未裁剪的图像，缩放到其容器的大小，即 100 像素的 75%。它还显示了我想有效地从 CSS 中得到什么——相当于物理裁剪的图像，它也可以缩放到其父级的大小。

它显示了我尝试使用背景大小，如您所见，它不会缩放到其父级的大小。

感谢您的帮助！

Answer 1

我能想到的唯一方法是使用clip 属性。遗憾的是，这只能应用于绝对定位的内嵌图像。

所以，基于问题：

Codepen Example

HTML

<div class="wrapper">
  <img class="clipper" src="http://lorempixel.com/output/city-h-c-200-300-8.jpg"/>
</div>

CSS

.wrapper {
  width:50%;
  height:350px;
  margin: 10px auto;
  border:1px solid grey;
  position: relative;   
}

.clipper {
  position: absolute;
  top:-75px; /* same as top clip */
  left:0;
  /* top, right, bottom, left */
  clip:rect(75px,200px,225px,0px);
}