FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

image view tag

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


afracsass
i want to show only a part of an image.
for instance, I have a picture which has 200px by 200px size. and i want to show left-bottom part of 100px by 100px on the web.
Is it possible?

the problem is I can only get stretched or shirinked version of the picture.

thanks,
Kaneda
One way I can think of is using CSS...

HTML:
Code:
<div id="myimage"></div>


CSS:
Code:

#myimage {
   width: 100px;
   height: 100px;
   background: url("myimage.jpg") no-repeat;
   background-position: 0px -100px;
}


That will load the image, only show 100x100 pixels of it, and place it at (0,-100), which means it's moved 100 pixels up (and thus you see the bottom 100 pixels of the left side).
AftershockVibe
Kaneda's (not Serge's) code will work fine. I was going to suggest a different way however it also uses CSS and is the same idea.

My version would however mean that the image was inside an <img> tag rather than used for a background. While this will look exactly the same it will allow the browser to treat it like a normal image with "save as..." etc.

HTML:
Code:
<div class="holder">
<img src="myimage.jpg" alt="My Image, Cropped" />
</div>


CSS:
Code:
div.holder
{
width: 100px;
height: 100px;
overflow: hidden;
}


I'm not entirely sure why you don't just crop the image using a paint program though.

EDIT: Typed Serge not Kaneda Wink
afracsass
Thank you all,
Both of the tags worked fine for me.

I don't know what CSS is and how to use it. looks like it's very powerful style desicriptor. Now I've got to know using div with css.
riv
Your last post was a bit confusing... If you don't know what CSS is and how you use it, how did you know that the last two solutions works?
But if you didn't know what CSS is, you can learn it at http://www.w3schools.com
The best way, im my opinion, to learn how to make layouts using css is by looking at the code used in the various examples at the layout resovior at http://www.bluerobot.com
afracsass
i mean i don't know the every detail of css, but i know at least how to copy and paste the code and where should the codes go in my html page.
Thank you, however, for recommend me the sites i can learn about it.

riv wrote:
Your last post was a bit confusing... If you don't know what CSS is and how you use it, how did you know that the last two solutions works?
But if you didn't know what CSS is, you can learn it at http://www.w3schools.com
The best way, im my opinion, to learn how to make layouts using css is by looking at the code used in the various examples at the layout resovior at http://www.bluerobot.com
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.