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