Question

我想向用户显示图片的特定部分。理想情况下，我能够在服务器上裁剪图像，但我无法为此应用程序执行此操作。我想要一个向用户显示的解决方案，就好像图像实际上是在服务器上裁剪一样，这样当它的包含元素变大或变小时，它可以正确缩放。

具体地说，我的图像是200px宽，300px高，我想显示图像的区域，x从0px到200px，y从75px到225px。因此，我想要一个有效的形象＆＃39;尺寸为200px宽，150px高。

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

仅显示图像的所需区域。
可放入流体宽度（例如宽度：50％）的容器中，并相应改变尺寸。

我已经包含了我迄今为止尝试过的一个例子：

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

该示例具有未剪切的图像，缩放到其容器的大小，这是100px的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);
}

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

1 个答案: