Question

Is there a way I can resize, crop, and center an image using html/css only? (img tag or css sprite)

For example if I have a 500×500 pixel image,

1. I want to resize that to a 250×250 pixel image

2. I want to make the actual visible image to be 100×100, but still have the scale of a 250×250 sized image.

3. I want the center of the image to be at a location x,y.

Is that possible with only html/css, if not, how do you propose I go about it with javascript?

Edit – 動靜能量:

For (2), say my scaled image is now 200×200, and I want my visible image to be 100×100: So I guess what I mean is I want the scale and resolution of the image to be 200×200 but I want the visible image to be 100×100 or in other words the visible image would be at coordinates x,y: 0,0; 0,100; 100,0; 100,100; of the 200×200 image. Sorry, but I’m not good at explaining this.

Answer 1

Update: an example at http://jsfiddle.net/LTrqq/5/

For

1. You can just use CSS’s width and height for the <img> element
2. It can be done by (1), and place this image into a div, and position: absolute, with a desired top and left, and place it in another div with position: relative, and this outer div can have width: 100px, height: 100px, and overflow: hidden
3. same as (2), with the desired top and left value.

We need the position: relative for the outer div in (2), because we want the inner div to position relative to this outer div, rather than relative to the whole document.

For the top and left, it is like top: -50px; left: -50px as an example.