jquery - jqueryを使用してコンテナに相対的な幅と高さを計算する

Question

私の画像コンテナはimage-wrapクラスで、.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 ピクセルのパディングを設定したいと思います。これは、.image-wrap img幅と高さを別の%値に変更する必要もあります。これを計算して jquery var として設定する方法image-wrap img。jquery を使用してクラスに追加できます。5 px のパディングは、他の幅と高さの値のペアでも同じままですimage-wrap(レスポンシブ デザインの場合もあります)。数式を評価して幅と高さ % を 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'});

お役に立てれば