如何将图片的一部分作为缩略图使用，而无需将其调整为缩略图

我正在寻找一种将图片的一部分用作缩略图而不实际调整图像大小的方法。如何将图片的一部分作为缩略图使用，而无需将其调整为缩略图

这就像你拍摄的照片的一部分，并显示为缩略图

2010-03-07 Chris

我阅读您想要拍摄大图片的问题，并仅使用图片的这一部分作为缩略图吗？在这种情况下，我不相信css精灵就是你要找的东西。 – 2010-03-07 22:07:43

尝试使用CSS溢出限制在div视，像这样

.preview {width: 60px; height: 60px; overflow: hidden;} 

<div class="preview"> 
    <img src="path to big image" alt=""/> 
</div>

来源

2010-03-08 01:59:06 pixeltocode

这意味着你必须完全加载图片，但你只掩盖了一部分。 – Chris 2010-03-08 11:12:42

这是正确的。 – pixeltocode 2011-06-19 22:50:18

我觉得精灵是你在找什么。

CSS Tricks对如何使用精灵一些帖子，所以我想请您看看，也许有文章CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

来源

2010-03-07 20:41:15

开始这里就是你想做的事......与背景图像的DIV的工作是什么，但这是一个DIV。如果你希望它仍然像一个图像布局明智的行为，你可以用“内联块”和浏览器不兼容的矩阵弄脏你的手，或者你可以简单地使用透明图像和背景图像。构建1x1像素的透明GIF，称其为“pixel.gif”。然后你要做的就是：

<img src="pixel.gif" width="40" height="40" 
    style="background:url(full_pic.jpg) -90px -90px no-repeat">

在这种情况下，40×40是你的作物规模，和（90，90）的偏移量，你抓住从作物完整的图像。

来源

2010-03-07 21:03:27 jpsimons

你所描述的似乎是CSS clip方法的用例。

img { 
    position:absolute; 
    clip:rect(0px,60px,200px,0px); 
    } 

img:hover { 
    clip: auto; /* 'un-clips' the image and displays it full-size */ 
    }

主要告诫这种技术是元素被裁剪必须有position: absolute;工作。

见（在推荐的顺序排列）：

来源

2010-03-07 22:02:58

如何将图片的一部分作为缩略图使用，而无需将其调整为缩略图

回答

相关问题