Showing only part of image, from the middle

It is not always necessary to show full image, causing scrollbars on browsers. When clipping overflowing image using overflow:hidden, stuff is clipped from the right (or left) side. Often the most important point is in the middle, so additional CSS is needed. (don't confuse with clip property in CSS, it is no use here)

Case 1 - image aligned to center

Lets assume that 200px on left, and 200px on right is less important than the rest, and of the rest right side is less iportant.

Example

wide test image

Code


<style type="text/css">

#case1 a {display:block;overflow:hidden;
          text-align:center;width:100%;width:100%;}
#case1 img {margin:0 -200px}
</style>
<a href="sunset.jpg" title="full image">
<img src="sunset.jpg" alt="wide test image"></a>

Case 2 - image aligned to left

Lets assume that 200px on left, and 200px on right is less important than the rest, and of the rest right side is less iportant.

Example

wide test image

Code


<style type="text/css">

div#case2 {overflow:hidden;width:100%;}
#case2 a {display:block;width:1121px;align:center;}
#case2 img {margin;0 -100px}
</style>
<div id="case2">
<a href="sunset.jpg" title="full image">
<img src="sunset.jpg" alt="wide test image"></a></div>

Notes

Borders and paddings not used. To get them work in IE you need to do something special, otherwise just removing all "width:100%"- property/value pairs should work.

Created by Lauri Raittila (lr@iki.fi) 2005-06-27