オーバーフローでイメージを配置する方法は？

私はdivの高さよりも高いImageを含む固定高さのdivを持っています。 divの途中でこの画像を配置したいと思い、jquery-ui position（）を使用します。画像はクリップされますが、div外のコンテンツは表示されません。私はオーバーフローy：可視（オーバーフローxは隠さなければならない）を試みた。私はイメージが完全に目に見えるようにしたい。私は何かが些細なものを欠いていると思う。オーバーフローでイメージを配置する方法は？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
<head> 
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8"> 
    <title>Jeroen's Plaatjes Presentator</title> 
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8"> 
     <script src="js/jquery-1.5.1.min.js" type="text/javascript" charset="utf-8"></script> 
     <script src="js/jquery-ui-1.8.10.custom.min.js" type="text/javascript" charset="utf-8"></script> 
     <script> 
    $(function() { 
     $('#focus_img').position({my: 'center center', at: 'center center', of: '#panel_1'}); 
    }); 
     </script> 
    </head> 
    <body> 
     <div id="wrapper"> 
    <div class="scroll"> 
     <div class="panel" id="panel_1"> 
     <img src="images/middle/kameleon.png" alt="kameleon" id="focus_img" style="{width:239 height:160}"/> 
     </div> 
    </div> 
     </div> 
    </div> 
    <div id="content" style="margin-top:50px;margin-left:auto;"> 
     <table width="100%"> 
    <tr><td id="left" width="50%"><div class="stage"></div> 
     </td><td id="bright" width="50%"></td></tr> 
     </table> 
    </div> 
    </body> 
</html>

CSSは次のようになります。

#wrapper { 
    padding-top: 150px; 
} 
#slider { 
    position: relative; 
} 

.scroll { 
    overflow-x: hidden; 
    overflow-y: visible; 
    width: 100%; 
    margin: 0 auto; 
    position: relative; 
    border: 2px solid black; 
    height: 50px; 
}

出典

2011-03-04 dr jerry

ここにコードのデモ：http://jsbin.com/imica3何が問題なのですか？私は問題を見ることができません – Sotiris

そのサイトのおかげで、非常に便利です。問題は、jsbin.com/imica3/3に画像がいっぱいに表示されないということです。私はdivの外に画像を置いて、現在は期待どおりに動作しています。 –

オーバーフローはトリッキーなビジネスです。 1つの方法は、画像に合わせてdivの高さを上げてから、次のいずれかを表示することです。またはそれを浮かせる。

panel_1のオーバーフローを設定しようとしましたか？

出典

2011-03-04 17:46:11

うん、ちょうどそれを試して、運がない。 –

私はdivの外に画像を置いてjquery-uiの位置を使用しましたが、今度は私が望むように表示されます。しかし、それは部門内で動作しないことは奇妙なままです。 –

ポジショニングの問題は、あなたも親を設定しなければならないということです。あなたの要件を正しく読んでいると仮定して:) –

オーバーフローでイメージを配置する方法は？

答えて

関連する問題