Question

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

就像你拍摄了一部分照片并将其显示为缩略图

Answer 1

尝试使用CSS溢出来限制div中的视口，如此

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

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

Answer 2

我认为精灵正是你所寻找的。

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

Answer 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;起作用。

参见（按推荐顺序）：

Answer 4

这是你想要做的......带有背景图像的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）是您从中抓取裁剪的完整图像的偏移量。

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

4 个答案: