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

Question

我正在使用可调整大小的函数来操作一些图像，我想知道是否可以有一个容器 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 可能会解决这个问题，但是，这只是 100% DIV 长度。

想法？

Answer 1

进行此更改，它将起作用。将容器宽度和高度设置为 auto，并显示 inline-block，以免占用完整的父宽度。

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