Grow your CSS skills. Land your dream job.

[Solved] Crop Image Size

  • # June 8, 2010 at 1:15 pm

    I’ve got an original image that’s 200px by 200px. I’d like to show it at 100px by 100px on a webpage without scaling it down or cropping the original file in any way.

    I’ve seen it done before, somewhere. How could I go about doing this?

    # June 8, 2010 at 1:25 pm

    I believe you can use TimThumb or another script to do something like this.

    http://www.darrenhoyt.com/2008/04/02/ti … -released/

    # June 8, 2010 at 2:17 pm

    If the image is in the html you can also just give it a width and height.

    <img src="images/yourimage.jpg" alt="whatever" width="100" height="100" />

    # June 8, 2010 at 7:29 pm

    Thanks guys but I’m sorry, I don’t think I explained myself properly. I want to take this image (300 x 224):
    [attachment=1]original.jpg[/attachment]
    And crop it in the code (not within an image editing program) to (300 x 150):
    [attachment=0]cropped.jpg[/attachment]
    The thing is the cropped image is used as a thumbnail on the front page, when clicked it brings you to another page with the original image. I don’t want to have two images in different sizes, it’ll make the work twice as long.

    Any help appreciated!

    # June 8, 2010 at 8:18 pm

    This seems to work pretty well:

    <div style="width:300px; height:150px; overflow:hidden;">

    <img style="position:relative; top:-25px;"src="original.jpg" width="300" height="224" />

    </div>

    (of course you can externalize the CSS if you want)

    Basically put the image inside a div, give the div a set height (150) and set the overflow to hidden. Then you adjust the positioning of the image to set it where you want within the div.

    # June 10, 2010 at 6:38 am
    "Lynz" wrote:
    This seems to work pretty well:

    <div style="width:300px; height:150px; overflow:hidden;">

    <img style="position:relative; top:-25px;"src="original.jpg" width="300" height="224" />

    </div>

    You’re a life saver, really appreciate it. This should serve me well in future projects. Thanks!

    # January 5, 2012 at 4:48 pm

    What’s the best method when the images are of varying sizes?

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".