動態調整容器DIV基於它內部的圖像

我使用可調整大小的功能來操縱一些圖像，我想知道是否有可能有一個容器DIV（具體下面的.CONTAINER）圍繞圖像到動態調整其內部的圖像。請參閱JSFIDDLE，瞭解我要做的事情。動態調整容器DIV基於它內部的圖像

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

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

本來，我想，也許放置容器寬度/高度自動將照顧這個問題，但是，只有100％的DIV長度。

想法？

來源

2016-04-28 Cutter

你可以嘗試使用調整基於調整大小大小事件，並改變寬度和高度。 http://api.jqueryui.com/resizable/#event-resize – jcubic

那麼爲什麼不只是[將'aspectRatio'設置爲'true']（https://jsfiddle.net/jmarikle/kcod5rsa/）如[文檔】（http://api.jqueryui.com/resizable/#option-aspectRatio）？ –

你能否確認這是否符合你的目的？ https://jsfiddle.net/vasi_32/6y1x9dwp/5/ – brk

進行此更改，它將工作。將容器寬度和高度設置爲自動，並顯示內嵌塊以便不採用完整的父寬度。

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的遏制線。

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

來源

2016-04-28 14:14:16

這樣做的竅門，但讓我根據您呼出的項目對此進行擴展。您看到的遏制性JS是我正在研究的次要部分的一部分。隨着上面突出顯示的更改 - 注意：我沒有刪除我的代碼中的遏制JS - 圖像現在能夠在調整大小時打破遏制，因爲它們中的一部分仍位於遏制之內。您是否有建議使用上述更新將其完全保存在收容中？ – Cutter

@JDCutter與定義的容器似乎大小不能放大。可能你必須找到一個解決方法，也許就像在你按下調整大小的箭頭時拖動鼠標時動態調整容器的大小。 –

動態調整容器DIV基於它內部的圖像

回答

相關問題