如何將圖片的一部分作爲縮略圖使用，而無需將其調整爲縮略圖

我正在尋找一種將圖片的一部分用作縮略圖而不實際調整圖像大小的方法。如何將圖片的一部分作爲縮略圖使用，而無需將其調整爲縮略圖

這就像你拍攝的照片的一部分，並顯示爲縮略圖

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

如何將圖片的一部分作爲縮略圖使用，而無需將其調整爲縮略圖

回答

相關問題