PDA

View Full Version : Clip the image if too big?


student101
03-15-2008, 11:56 AM
Is there a method or code that can clip an image if it's too big?

This placeholder has the allowed size for images.
placeholder: width = 150px, height = 150px

These images need to be clipped as apposed to resized to fit.
image1: width = 180px, height = 300px
image2: width = 320px, height = 712px

Is this possible?

This doesn't cut off my images.
The image gets resized and looks crap, terrible!

.photos{
float:right;
padding: 10px;
/*text-align: center;*/
}
.photos img{
vertical-align: top;
background-image: url(../images/image1.gif);/*true image size is 500px by 877px*/
overflow: auto;
width: 250px;
background-position: center center;
background-repeat: no-repeat;
display: block;
}

student101
03-15-2008, 07:07 PM
Scrap that problem.
I have an entirely new problem.
When I copy and paste the entire css file out into the html parts it stops working:
<style media="all" title="style" type="text/css">
...CSS CODE...
</style>
When I use this then it's back to normal and works fine.
<link href="css/style.css" rel="stylesheet" type="text/css" />
Any ideas?

Cheers

Cary
03-15-2008, 09:22 PM
Your style sheet and html are not in the same folder, so the relative paths within the CSS break when you embed the CSS without correcting the relative paths.

student101
03-15-2008, 09:31 PM
Good point, too tired to think today.

Thank you!

Cary
03-15-2008, 09:46 PM
Is there a method or code that can clip an image if it's too big?

Why not just use a 150x150 div with the image as a positioned background?

student101
03-15-2008, 10:09 PM
I have got there, finally.
There is a clipper thingy here:

http://mysite.orange.co.uk/azygous/clip_img.html

Cary
03-15-2008, 10:13 PM
Thanks for link. I was trying that, but didn't know how to get to work with IE6.

student101
03-15-2008, 10:34 PM
Cool, anytime.