как позиционировать изображения с переполнением? - PullRequest
Новая
       32

как позиционировать изображения с переполнением?

0 голосов
/ 04 марта 2011

У меня есть div с фиксированной высотой, содержащий изображение выше высоты div. Я хочу расположить это изображение в середине div, и я использую jquery-ui position (). Однако изображение обрезается, содержимое за пределами div не отображается. Я попробовал overflow-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;
}

1 Ответ

1 голос
/ 04 марта 2011

Переполнение - сложное дело. Один из вариантов - увеличить высоту div, чтобы она соответствовала вашему изображению, а затем либо отобразить: block; или выпустить это.

Вы пытались установить переполнение для panel_1?

...