如何将图片的一部分用作缩略图而不将其调整为缩略图答案

【问题标题】：how to use a part of a picture as thumbnail without resizing it to a thumbnail如何将图片的一部分用作缩略图而不将其调整为缩略图
【发布时间】：2011-01-24 18:23:37
【问题描述】：

我正在寻找一种将图片的一部分用作缩略图而不实际调整图像大小的方法。

这就像您捕获图片的一部分并将其显示为缩略图

【问题讨论】：

我读到了您想拍摄大图像的一部分并仅使用图像的那一部分作为缩略图的问题？在这种情况下，我不相信 CSS 精灵是您正在寻找的。span>

标签： css image thumbnails

【解决方案1】：

我认为精灵是你正在寻找的。p>

CSS Tricks 有一些关于如何使用精灵的帖子，所以我建议您参考一下，也许从文章CSS Sprites: What They Are, Why They’re Cool, and How To Use Them 开始

【讨论】：

【解决方案2】：

这就是您想要做的...带有背景图像的 DIV 有效，但那是 DIV。如果您希望它仍然像图像布局一样表现，您可以使用“内联块”和浏览器不兼容矩阵来弄脏您的手，或者您可以简单地使用带有背景图像的透明图像。构建一个 1x1 像素的透明 GIF，说它是“pixel.gif”。那么你要做的就是：

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

在这种情况下，40x40 是您的裁剪尺寸，(90, 90) 是您从中抓取裁剪的完整图像的偏移量。

【讨论】：

【解决方案3】：

您所描述的似乎是 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; 才能工作。

请参阅（按推荐顺序）：

【讨论】：

【解决方案4】：

尝试使用 CSS 溢出来限制 div 中的视口，像这样

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

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

【讨论】：

这意味着您必须将图片完全加载正确，但您只屏蔽了一部分。