jquery - 计算父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) 返回元素高度、内边距、边框和边距

我在这篇文章 here 中有更多详细信息，包括使用 jsFiddle 的输出示例.

对于宽度，您可以使用 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);