The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> can we show part of an image in <img> HTML
venkat_walking
post 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


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Nov 3 2009, 09:59 AM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,340
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 3 2009, 10:37 AM
Post #3


Computer says no.
********

Group: WDG Moderators
Posts: 19,222
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Nov 3 2009, 10:47 AM
Post #4


Jocular coder
********

Group: Members
Posts: 2,298
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.)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
moo
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 3 2009, 11:24 AM
Post #6


.
********

Group: WDG Moderators
Posts: 8,619
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. happy.gif

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
venkat_walking
post 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. happy.gif

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Prabu S
post 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;
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 23rd November 2020 - 05:53 PM