Question

我使用Resizable函数来操作一些图像，我想知道是否可以使用容器DIV（下面特别是.CONTAINER）围绕图像来动态调整大小里面的图像。请参阅此JSFIDDLE，了解我的目标。

HTML

<div class="container">
  <div class="resizable" class="ui-state-active">
      <img src="http://41.media.tumblr.com/3e99c08237117645f55cd1c4bdbf3180/tumblr_mky50dQmXI1s56exfo1_500.png" alt="doge">
  </div>
</div>

CSS

.container { width: auto; height: auto; }

.resizable { background-position: top left; width: 150px; height: 200px; }
    .resizable, .container { padding: 0.5em; }
        .resizable img {width:100%;}

JS

$(function() {
    $( ".resizable" ).resizable({
      containment: ".container",
      aspectRatio: 150/200
    });
});

最初，我认为可能将容器宽度/高度设置为AUTO会解决这个问题，但这只是DIV长度的100％。

思考？

Answer 1

进行此更改，它将起作用。将容器宽度和高度设置为auto，并显示内联块以便不占用整个父宽度。

CSS

.container { width: auto; height: auto; display: inline-block; }

.resizable { background-position: top left; width: 150px; height: 200px; }
    .resizable, .container { padding: 0.5em; }
        .resizable img {width:100%;}

此外，您还必须删除js的收容行。

JS

$(function() {
    $( ".resizable" ).resizable({
        aspectRatio: 150/200
    });
});

根据容器内部的图像动态调整容器DIV的大小

1 个答案: