CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Derek
Derek

Reputation: 12388

Resize and center image in html/css?

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 500x500 pixel image,

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

  2. I want to make the actual visible image to be 100x100, but still have the scale of a 250x250 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 200x200, and I want my visible image to be 100x100: So I guess what I mean is I want the scale and resolution of the image to be 200x200 but I want the visible image to be 100x100 or in other words the visible image would be at coordinates x,y: 0,0; 0,100; 100,0; 100,100; of the 200x200 image. Sorry, but I'm not good at explaining this.

Upvotes: 1

Views: 7958

Answers (3)

nonopolarity
nonopolarity

Reputation: 151214

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.

Upvotes: 4

JSWhisperer
JSWhisperer

Reputation: 674

You can definatley size the image to any dimenson then place it in a div and hide the overflow to acheive a crop look. However if you actually want to crop the image so that say someone wants to download a copy of it cropped and scaled check out: http://deepliquid.com/projects/Jcrop/demos.php

But if you can at all try PHP, http://www.binarymoon.co.uk/projects/timthumb/ is very easy to use, just put it on your server and point your img tag src to it. example: < img src="/timthumb.php?mycat.jpg&h=250&w=250" />

Upvotes: 0

diggersworld
diggersworld

Reputation: 13090

Just done this off the top off my head but it should be nearly there if not completely accurate. The -X and -Y coordinates are what get you to the crop offset. So for example if you want to crop from 20x30 you'd make them -20px and -30px.

<style>
    #crop { width: 100px; height: 100px; display: block; overflow: hidden; position: relative; }
    #crop img { position: absolute; left: -X; top: -Y; }
</style>

<div id="crop">
    <img src="500x500.jpg" width="250" height="250">
</div>

If you want to center it though and you know the size of the image in the crop container you could use the following CSS instead:

#crop img { position: absolute; left: 50%; top: 50%; margin: -125px 0 0 -125px; }

125px is half of 250 so it should make it central.

Upvotes: 0

Related Questions