使用 css 在浏览器中绘制部分图像

Question

提示，是否可以使用img图片，但是这些图片已经压缩过（用img正常运行）

比如我有'images/myimg.png'张图片，但我想只显示坐标为0.100，尺寸为250x75的部分，而浏览器认为这张图片尺寸为100x50

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

<img class = 'myimg' />

我知道我可以使用另一种方式：

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

但在这种情况下，图像的缩放不可用:(

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 在浏览器中绘制部分图像

drow part of image in browser using css

html

css

background

image

slice