Question

我的图片容器为image-wrap类，.image-wrap img宽度＆amp;高度设置为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，因此我可以使用jquery将其添加到image-wrap img类。即使对于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'});

希望这有帮助

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

3 个答案: