Question

提示，是否可以使用图像img片段，但这些图像已被压缩（使用img正常操作）

例如我有＆＃39; images / myimg.png＆＃39;图像，但我想只显示坐标0.100和尺寸250x75的一部分，以及该图像大小为100x50的浏览器

＆＃13;

.myimg {
  width: 100px;
  height: 50px;
  content: url ( 'images / myimg.png');
  / * Pseudo-attributes - what I would like to find * /
  content_pos_x: 0px;
  content_pos_y: 100px;
  content_width: 250px;
  content_height: 75px;
}

＆＃13;

<img class = 'myimg' />

＆＃13;

我明白我可以用另一种方式：

＆＃13;

background: url ( 'images / myimg.png') 0px 100px;

＆＃13;

但在这种情况下，图片缩放功能不可用：（

Answer 1

对于矩形剪裁，我发现使用可剪辑的容器div很简单：

<div class='clipper'>
  <img src="myimage.jpg">
</div>

CSS将使用溢出隐藏，位置相对和位置绝对，如下所示：

.clipper {
  width: 100px;
  height: 50px;
  position: relative;
  overflow: hidden;
}
.clipper img {
  width: 640px;          /* Target width of image */
  height: 480px;         /* Target height of image */
  left: -30px;           /* Offset to first visible pixel in target size */
  top: -50px;            /* Offset to first visible pixel in target size */
  position: absolute;
}

所以基本上你可以这样做，但你的内容矩形必须预先计算成目标大小单位，并作为限幅器WxH和img偏移量应用。

Answer 2

为什么使用img - 标记而没有src？如果你想要一张图片，你不需要使用img - 标签。

你可以试试这个：

CSS：

#foo {
    background-image: url("http://images4.wikia.nocookie.net/__cb20100429000907/jamescameronsavatar/images/e/e5/Google_Chrome_Icon.png");
    background-position: -50px -30px;   // This is the position
    background-size: 223px 99px;        // This is the scaling
    height: 300px;
    width: 300px;
}

HTML：

<div id="foo"></div>

Demo here.

使用css在浏览器中投入部分图像

2 个答案: