計算父div的寬度和高度並相應地應用於圖像

Question

我有一個父div，它在響應寬度和固定高度以及其中的一些圖像。在運行時，我需要一個Jquery函數來計算div的寬度和高度，並將寬度（px）和高度（px）參數應用於圖像。即我的代碼現在的問題是

<div id="slider-wrapper" class="someclass"> 
    <img src="/image1.jpg" alt="" /> 
    <img src="/image2.jpg" alt="" /> 
    <img src="/image3.jpg" alt="" /> 
</div> 

生成的代碼，我需要將

<div id="slider-wrapper" class="someclass"> 
    <img src="/image1.jpg" height="300px" width="total-div-width(px)" alt="" /> 
    <img src="/image2.jpg" height="300px" width="total-div-width(px)" alt="" /> 
    <img src="/image3.jpg" height="300px" width="total-div-width(px)" alt="" /> 
</div> 

謝謝你在期待

Answer 1

使用jQuery你可以使用.height()，.innerHeight()或.outerHeight()。

的區別在於：

• height()返回元件的剛高度​​，沒有邊界，沒有邊距和沒有填充
• innerHeight()返回元件高度和填充
• outerHeight()返回元件高度，填充和邊框
• outerHeight(true)返回元素高度，填充，邊框和邊距

我有更多的細節，包括使用jsFiddle在這篇文章here輸出示例。

對於寬度，您可以使用width()，innerWidth()或outerWidth()。
與高度相同的邏輯也適用。

所有值以像素爲單位。

要獲得高度/寬度，你可以用它與此類似：

// The below is an example, you need to add your element references as required. 

// Use height(), innerHeight() or outerHeight() as needed. 
var newHeight = $("#slider-wrapper").height(); 

// Use width(), innerWidth() or outerWidth() as needed. 
var newWidth = $("#slider-wrapper").width(); 

要設置高度/寬度，你可以使用它類似於：

// The below is an example, you need to add your element references as required. 
var newHeight = $("#slider-wrapper img").height(newHeight); 
var newWidth = $("#slider-wrapper img").width(newWidth);