hankknight
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!
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!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
> 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>
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>
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>