Cut Image using HTML

This is also known as Clip Property of CSS.

Take a look at the image of the Nature at following. That Image has Cropped. Let’s see how to crop image using html.

The Original image is 600×450. but we need to display small image. here i cut the image at right side.

<!DOCTYPE html>
<html>
<head>
<style>
.cut img {
position: absolute;
clip: rect(10px,60px,350px,0px);
}
</style>
</head>
<body>

<div class="cut">
<img src="http://www.jakpost.travel/imgfiles/full/109/1095347/nature-gif-wallpaper-download.gif" width="100" height="140">
</div>

<div style="margin-left:120px;">
<img src="http://www.jakpost.travel/imgfiles/full/109/1095347/nature-gif-wallpaper-download.gif" >
</div>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *