Question

My image container is image-wrap class , .image-wrap img width & height is set to 100% which fill the container.

Css:

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

Now I want to set 5 px padding inside image-warp, this also need to change .image-wrap img width and height to some another % value. How to calculate and set this as jquery var, so I can add it to image-wrap img class using jquery. My padding of 5 px remains same even for any other width -height value pair for image-wrap (may be for responsive design).Help me evaluating mathematical equation to set width height % as jquery var.

Answer 1

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

Hope this helps