View Full Version : Clip the image if too big?

03-15-2008, 10: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!

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;

03-15-2008, 06: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...
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?


03-15-2008, 08: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.

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

Thank you!

03-15-2008, 08: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?

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


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

03-15-2008, 09:34 PM
Cool, anytime.