เป็นการซ่อนรายละเอียดจากสิ่งที่เกินกว่า ความกว้างหรือความยาว ที่เรากำหนดไว้ เช่น เรากำหนดความกว้างของกรอบใส่ข้อความไว้ 540px  แต่ขนาดรูปในกรอบมีขนาดมากกว่าคือ   600px 
เราสามารถใช้ซ่อนรายละเอียดของรูปภาพส่วนที่เกิน

overflow:hidden;

body {     background:#444; }
img{border:0;}
#container{
margin:0 auto;
text-align:left;
width:790px;
}
#main{
float:left;
display:inline;
width:580px;
margin:1em 0;    
background:#fff;
}
#main .content{
margin-left:20px;
margin-top:20px;
width:540px;
overflow:hidden;
}

Html

<div id="container"> 
<div id="main"> 
<div class="content"> 
<p><img src="sample.jpg" alt="600px wide image" />p> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Proin et nisi. Fusce volutpat quam. Phasellus 
eget mi. Integer urna purus, bibendum ut, venenatis 
non, condimentum id, tellus. In placerat sollicitudin
justo. Suspendisse consequat. Integer aliquam rutrum
magna. Etiam eu neque. Fusce eu dolor. Morbi 
sollicitudin condmentum turpis. Nulla tristique
lacus vel nunc. Cras iaculis tempus dui. Sed 
elementum ante. Cras ac odio sit amet ante 
ultrices semper. 
Mauris tellus urna, porta ut, vulputate non, 
hendrerit sit amet, leo. Pellentesque 
habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. 
Aliquam erat volutpat.p> 
div> 
div> 
div>

 พอดีคุณ  ฟิวส์ ได้ comment ว่าอยากได้ กรอบที่ขยายตาม object ด้านในหรือรูปด้านใน
 ถ้าลองใช้

 min-width:540px;

 ก็จะได้แบบนี้   ดูตัวอย่าง 

 


แต่ min/max-* ใน IE 6 จะไม่ Support  อาจจะใช้ css expression (IE Only) ควบคุมแทน

width:expression(document.body.clientWidth<540? "540px":"auto");