jquery - 使用jquery计算相对于容器的宽度和高度

Question

我的图像容器是image-wrapclass ，.image-wrap img宽度和高度设置为 100% 填充容器。

CSS：

    .image-wrap{
    width:600px;
    height:400px;
    position:relative;
    overflow:hidden;
    }
    .image-wrap img{
    position:relative;
    width:100%;
    height:100%;
    }

现在我想在 image-warp 中设置 5 px 的填充，这也需要将.image-wrap img宽度和高度更改为另一个%值。如何计算并将其设置为 jquery var，因此我可以image-wrap img使用 jquery 将其添加到类中。即使对于任何其他宽度-高度值对image-wrap（可能用于响应式设计），我的 5 px 填充保持不变。帮助我评估数学方程以将宽度高度 % 设置为 jquery var。

Answer 1

jQuery：

   var $imgHeight = $('.image-wrap img').height();
   var $imgWidth = $('.image-wrap img').width();

你也可以用 css3 做到这一点：

.image-wrap img{
  position:relative;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  padding: 5px;
}

Answer 2

jQuery(".image-wrap").each(function() {

    myWidth = jQuery(this).width();
    myHeight = jQuery(this).height();
    myWidth = myWidth - 10;
    myHeight = myHeight - 10;
    myWidth = myWidth.toString().concat("px");
    myHeight = myHeight.toString().concat("px");

    jQuery(this).find("img").css({

        height: myHeight,
        width: myWidth
    });
});

希望这可以帮助

Answer 3

jQuery("img.image-wrap").css({padding:'5px', width:'590px', height:'390px'});

希望这可以帮助