 can we show part of an image in <img> HTML |
  |
| venkat_walking |
 Nov 3 2009, 07:21 AM
Post
#1
|
|
Member  Group: Members Posts: 30 Joined: 22-May 09 Member No.: 8,678  |
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 |
  |
 
|
| Darin McGrew |
Nov 3 2009, 09:59 AM
Post
#2
|
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
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.
|
|
|
|
| pandy |
Nov 3 2009, 10:37 AM
Post
#3
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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. |
|
|
|
| Brian Chandler |
Nov 3 2009, 10:47 AM
Post
#4
|
|
Jocular coder Group: Members Posts: 2,460 Joined: 31-August 06 Member No.: 43 |
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.) |
|
|
|
| moo |
Nov 3 2009, 11:21 AM
Post
#5
|
|
Member Group: Members Posts: 46 Joined: 12-September 07 Member No.: 3,783 |
You could create a 100x100 div and apply the image as a background:
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" /> or something similar. |
|
|
|
| Christian J |
Nov 3 2009, 11:24 AM
Post
#6
|
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
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. |
|
|
|
| venkat_walking |
Nov 5 2009, 06:42 AM
Post
#7
|
|
Member Group: Members Posts: 30 Joined: 22-May 09 Member No.: 8,678 |
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. |
|
|
|
| Prabu S |
May 7 2014, 05:51 AM
Post
#8
|
|
Group: Members Posts: 1 Joined: 7-May 14 Member No.: 20,849 |
QUOTE(Darin McGrew @ Nov 3 2009, 09:59 AM) 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. Hi, We can show the part of an image using background-position. Using this we can show the portion of an image. For example : background:position: -47px 0px; |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 19th April 2024 - 05:48 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC