You could also use "overflow:hidden" in the container to clip the bottom right of image and then use negative margin's to re-position. Taking GrandSchtroumpf's example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html
<html>
<head>
<title></title>
<style type="text/css">
div.cropme {
height: 50px;
border: 1px solid red;
width: 81px;
overflow:hidden;
}
div.cropme img {
margin-top:-10px;
margin-left:-10px;
}
</style>
</head>
<body>
<div>lorem ipsum</div>
<div class='cropme'>
<img src="http://www.google.com
</div>
<div>dolor sit amet</div>
</body>
</html>
The CSS "clip" property is probably the "proper CSS" way to do it, but the overflow example is just an alternative route.
Chris.
Main Topics
Browse All Topics
by: GrandSchtroumpfPosted on 2005-11-16 at 07:26:01ID: 15303793
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/html
<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
</div>
<div>dolor sit amet</div>
</body>
</html>