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

计算父div的宽度和高度并相应地应用于图像

1 个答案: