how to position images with overflow?_问答_开发者

开发者 https://www.devze.com 2023-02-14 17:20 出处：网络

I do have div with a fixed height, containing an Image higher than the div\'s height. I want to position this image in the middle of the div, and I use jquery-ui position().

I do have div with a fixed height, containing an Image higher than the div's height. I want to position this image in the middle of the div, and I use jquery-ui position(). However the image is clipped, the contents outside the div is not shown. I tried the overflow-y: visible (overflow-x must be hidden). I want the image to be completely visible I think I'm missing something trivial.

<!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>
    </he开发者_开发问答ad>
    <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>

the css looks like:

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

Overflow is tricky business. One option is to increase the div height to fit your image, then either display: block; or float it.

Have you tried setting the overflow for panel_1?