Css 如何定位溢出的图像？_Css_Image_Jquery Ui_Positioning

Css 如何定位溢出的图像？

css image jquery-ui

Css 如何定位溢出的图像？,css,image,jquery-ui,positioning,Css,Image,Jquery Ui,Positioning,我有一个固定高度的div，包含一个高于div高度的图像。我想把这个图像定位在div的中间，并且我使用jQuery UI位置（）。但是图像被剪裁，div之外的内容不会显示。我尝试了溢出-y:visible（溢出-x必须隐藏）。我希望图像完全可见，我想我遗漏了一些琐碎的东西 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&

我有一个固定高度的div，包含一个高于div高度的图像。我想把这个图像定位在div的中间，并且我使用jQuery UI位置（）。但是图像被剪裁，div之外的内容不会显示。我尝试了溢出-y:visible（溢出-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>

溢出是一件棘手的事情。一个选项是增加div高度以适合您的图像，然后显示：block；或者让它浮动

您是否尝试设置面板_1的溢出

我已经将图像放在div之外，并使用jqueryui的位置，现在它显示为我想要的。但奇怪的是，它在div中不起作用。定位的问题是，您还必须设置父级。。。假设我正确地阅读了您的需求：）下面是您的代码演示：它有什么问题？我看不出问题。谢谢你的网站，非常方便。问题是图像没有完全显示，在jsbin.com/imica3/3中，我将图像放在div之外，现在它按预期工作。

#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;
}