【jQuery】要素をウィンドウにフィットさせつつ、Aspect Ratioを保持

by tea4two

HTML

<img id="theimg" src="http://placekitten.com/g/200/300" />

<script>
    
</script>

CSS

body{
    padding:0px;    
}

JavaScript

var fixDimensions = function(){
    
    //Get the image dimensions:
    var image = {
        width: $("#theimg").width(),    
        height: $("#theimg").height()
    };
    
    //Get the page dimensions:
    var page = {
        width:$(window).width(),
        height:$(window).height()
    };
    
    //Get the image ratio, this is what we want to preserve:
    var imageRatio = image.width/image.height;
    
    //Get the page ratio, this is what we use to decide which dimension to fix:
    var pageRatio = page.width/page.height;
    
    //Do we fix the height? (if not, we fix the width)
    var fixHeight = (imageRatio > pageRatio);
    
    //Create a place to store the new image dimensions:
    var newImage = {
        left:0,
        top:0,
        width:0,
        height:0
    };
    
    //Do the calculations:
    if (fixHeight){
        newImage.height = page.height;
        newImage.width = page.height * imageRatio;
        //The height matches the page height, so we need to center
        //the width.
        newImage.left = -(newImage.width - page.width) / 2;
    } else {
        newImage.height = page.width / imageRatio;
        newImage.width = page.width;
        newImage.top = -(newImage.height - page.height) / 2;
    
    }
    
    //Now we set the image's new dimensions:
    $("#theimg").css({
        "position":"absolute",
        "top":newImage.top + 'px',
        "left":newImage.left + 'px',
        "width":newImage.width + 'px',
        "height":newImage.height + 'px' 
    });

    console.log(fixHeight, image, page);
};
$(window).on('load',function(){fixDimensions; console.log('ready')});
$(window).on('resize', fixDimensions);