html - 使用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

为什么要使用没有 src 的 img 标签？如果你想要一张图片，你不需要使用 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.