Question

我确实拥有固定高度的div，其中包含高于div高度的Image。我想将这个图像放在div的中间，我使用jquery-ui position（）。但是，图像被剪裁，div外部的内容未显示。我尝试了溢出-y：visible（overflow-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;
}

Answer 1

溢出是一件棘手的事情。一种选择是增加div高度以适合您的图像，然后显示：block;或漂浮它。

您是否尝试过为panel_1设置溢出？

如何定位溢出图像？

1 个答案: