how to use a part of a picture as thumbnail without resizing it to a thumbnail

Question

Hi,

I'm looking for a way to use a part of a picture to use as a thumbnail without actually resize the image.

It's like you capture a part of the picture and show it as thumbnail

Answer 1

I think sprites are what you're looking for.

CSS Tricks has some posts on how to use sprites, so I'd refer you to that, maybe starting with the article CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

Answer 2

Here's what you want to do... The DIV with the background image works, but that's a DIV. If you want it to still behave like an image layout-wise, you could get your hands dirty with "inline-block" and a matrix of browser incompatibilities, or you could simply use a transparent image with a background image on that. Construct a 1x1 pixel transparent GIF, say it's "pixel.gif." Then all you do is:

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

In this case 40x40 is your crop size, and (90, 90) is the offset into the full image where you grab the crop from.

Answer 3

What you describe seems to be the use-case of the CSS clip method.

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

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

The main caveat with this technique is that the element to be clipped must have position: absolute; to work.

See (in order of recommendation):

1. http://www.cssplay.co.uk/menu/clip_gallery
2. http://www.w3schools.com/CSS/pr_pos_clip.asp

Answer 4

try using CSS overflow to limit the viewport in the div, like so

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

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