Link to home
Start Free TrialLog in
Avatar of hankknight
hankknightFlag for Canada

asked on

Crop an image with CSS

Hello.

I want to use CSS to make it look like I have "cropped" an image.

I have an image that is 192 px wide by 96 high.  I want to hide the top 15 px.

       <div class="cropme" id="mydiv"><img src="myimage" width="192" height="15" class="magetocrop"></div>

The page has a white background, so if I were to overlay a white box on the top of the image it should work.

Any ideas?

Thanks!
Avatar of GrandSchtroumpf
GrandSchtroumpf

You can use the "clip" CSS property.
Unfortunately this only works for elements that have "position:absolute" (layers).
Use it wisely to make sure your image layer does not overlap any other content.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">

div.cropme {
  position: relative;
  height: 81px;
  border: 1px solid red;
}
div.cropme img {
  position: absolute;
  clip: rect(15px auto auto auto);
  top: -15px;
}

</style>
</head>
<body>

<div>lorem ipsum</div>

<div class='cropme'>
<img src="http://www.google.com/intl/en/images/logo.gif" width="192" height="96">
</div>

<div>dolor sit amet</div>

</body>
</html>
ASKER CERTIFIED SOLUTION
Avatar of rcMing
rcMing

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
> The CSS "clip" property is probably the "proper CSS" way to do it.
Not at all...  Using a negative margin is probably better in this case.
Absolute positioning should be avoided except for pop-ups and positionable elements.
The only problem with "overflow:hidden" is that it will also hide the horizontal overflow...  But in this case, the width of the div can be set since we know the width of the image, so the overflow:hidden will only hide the top part of the image in all situations.
Points well earned rcMing!
<:°)

Here is an updated version that only hides the top 15px of the image:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">

div.cropme {
  border: 1px solid red;
  height: 81px;
  width: 192px;
  overflow:hidden;
}
div.cropme img {
  margin-top: -15px;
}

</style>
</head>
<body>

<div>lorem ipsum</div>

<div class='cropme'>
<img src="http://www.google.com/intl/en/images/logo.gif" width="192" height="96">
</div>

<div>dolor sit amet</div>

</body>
</html>