html - 使用 CSS(响应式)裁剪和缩放图像的特定区域

Question

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

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

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

1. 仅显示图像的所需区域。
2. 可以放置在具有可变宽度(例如宽度:50%)的容器中，并相应地更改大小。

我在这里包含了一个我到目前为止尝试过的例子:

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

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

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

感谢您的帮助!

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