Question

我有弹出的模态，我使用ui-resizable。问题是如果模态很高（它有一个设定的高度因此可以滚动），图像随着滚动一起移动。我无法修复它，因为如果你抓住它并水平或垂直移动模态移动。不知道该怎么办。目前它位于模态的右下角。如果需要，也可以使用jQuery。

https://jsfiddle.net/x7dw1wjg/

HTML

 <div class="ui-dialog">
    <div class="container">//contains everything in the modal</div>
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se">
 </div>

CSS

 .ui-dialog{
   width: 900px;
   height; auto;
   overflow: auto;
  }
 .ui-resizable-handle {
 width: 22px;
 height: 22px;
 right: 0px;
 bottom: 0px;
 background-position: -77px -220px; // this is just the icon
 position: absolute;
 }

 .container {
 position: relative;
 padding: 1em;
 overflow: auto;
 width: auto;
 max-width: 900px;
 height: 600px;
 }

Answer 1

.container img {
height:0;
width:50%
padding-bottom: 50%;
}

这将始终使图像的正方形高度由其宽度设置。

让图像坚持到底

1 个答案: