CODEWITHSUNDEEP
htmlimage
SHRIPAL MEHTA
SHRIPAL MEHTA

Reputation: 51

Crop image in HTML5

how to crop an image in html? I have an image on server-pc, is it possible to put only a cropped portion on my webpage without explicitly cropping and creating a new image?

Upvotes: 3

Views: 4698

Answers (1)

diggersworld
diggersworld

Reputation: 13080

You have two options really.

1) is to use image modification scripts to reproduce a cropped image, like TimThumb (requires PHP). This will crop the image dynamically. It's unclear from your question whether you don't want a new image at all, or whether you just don't want to create one manually.

2) is to do something nifty with HTML/CSS. Basically you'd create a container for your image, hide the overflow, and position/resize the image within it. It'll be something like this...

HTML:

<div class="crop">
    <img src="image.jpg" alt="">
</div>

CSS:

.crop {
    display: block;
    height: 100px;
    position: relative;
    overflow: hidden;
    width: 100px;
}
.crop img {
    left: -20px; /* alter this to move left or right */
    position: absolute;
    top: -20px; /* alter this to move up or down */
}

Upvotes: 4

Related Questions