Hi,
I want to ask can we show part of an image in <img> tag
Suppose if the image is of 300x400 size, but I only want to show the vropped 100x100 part section that image (Not shrinking the image). Can we do this.
Please tell me
Venkat
Full Version: can we show part of an image in <img> HTML
No, there is no way to use HTML to crop an image. Create another image that is a cropped version of the first, and use the cropped image instead.
CSS clipping didn't use to work all that well, but it's been years since I tried so who knows?
http://www.w3.org/TR/CSS2/visufx.html#overflow-clipping
A way to fake it, less elegantly, is with a border-less iframe.
http://www.w3.org/TR/CSS2/visufx.html#overflow-clipping
A way to fake it, less elegantly, is with a border-less iframe.
QUOTE(Darin McGrew @ Nov 3 2009, 11:59 PM) 
No, there is no way to use HTML to crop an image. Create another image that is a cropped version of the first, and use the cropped image instead.
I'm not sure this is strictly true. Put the image inside an iframe, with no scroll bars, the image positioned appropropriately, and I think you can display any desired crop of an image in an html document. (Two, if you count the iframe document as separate.)
(Of course I'm not suggesting this is a particularly sensible idea.)
You could create a 100x100 div and apply the image as a background:
or something similar.
CODE
<style>
.clippedImage {display:block; position:relative; height:100px; width:100px; background:#fff none top left no-repeat;}
.clippedImage img {display:none;}
</style>
<div class="clippedImage" style="background-image:url('path/to/image.jpg')"><img src="path/to/image.jpg" alt="image here for non-css enabled users" />
.clippedImage {display:block; position:relative; height:100px; width:100px; background:#fff none top left no-repeat;}
.clippedImage img {display:none;}
</style>
<div class="clippedImage" style="background-image:url('path/to/image.jpg')"><img src="path/to/image.jpg" alt="image here for non-css enabled users" />
or something similar.
QUOTE(pandy @ Nov 3 2009, 04:37 PM)
CSS clipping didn't use to work all that well, but it's been years since I tried so sho knows?
http://www.w3.org/TR/CSS2/visufx.html#overflow-clipping
I thought it was removed in CSS2.1, but it seems to be there too.
You can also use CSS "overflow: hidden" on a parent block element with limited dimensions, or make the image the background of an element.
You can also crop an image with PHP on the server.
QUOTE(Christian J @ Nov 3 2009, 11:24 AM)
QUOTE(pandy @ Nov 3 2009, 04:37 PM)
CSS clipping didn't use to work all that well, but it's been years since I tried so sho knows?
http://www.w3.org/TR/CSS2/visufx.html#overflow-clipping
I thought it was removed in CSS2.1, but it seems to be there too.
You can also use CSS "overflow: hidden" on a parent block element with limited dimensions, or make the image the background of an element.
You can also crop an image with PHP on the server.
I haven't tried any of the above solution yet. I will try in a day or two.
But can we do this with Jquery.
Thanks
Venkat.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.