How to fit image to frame keeping aspect ratio and center in thumbnail list

I want to show list thumbnail box as data grid. each thumbnail image has to be placed in frame with specific width and height (for consistency) as follow:

<div class='frame'>
   <img src='img1.jpg' />
</div>
<div class='frame'>
   <img src='img2.jpg' />
</div>  

By setting image width and height to frame, images change to wrong aspect ratio and for smaller size image than frame, they are stretched to frame (I don't want to effect smaller size image). How can I fit image within frame without effecting aspect ratio of image. my next question is how can I set image to center of frame whatever the size is. should I do this with javascript? Please help me

Answers:

Answer

you cannot fit both width and height in frame to maintain aspect ratio. you can set either max-width or max-height value of image to 100% to fit in frame. try my code. I am using this method in my projects. I use wrap and inner to get border and padding in frame. no javascript is needed for fitting image. but you have to use to center your image in frame as width and height of individual image are dynamic value. my sample set image's max-width to fit in frame. HTML:

<div class='wrap'>
    <div class='inner'>
    <img src='http://www.pacificrimmovie.net/wp-content/uploads/Pacific-Rim-Movie-Striker-Eureka-Australian-Jaeger.jpg' />
    </div>
</div>

CSS:

.wrap{
    padding:10px;
    border: 1px solid #777;
    width: 150px;
    height: 100px;
    overflow:hidden;
    float:left;
    margin: 0px 20px 20px 0px;
}
.inner{
    width: 100%;
    height: 100%;
    overflow:hidden;
    text-align:center;
    position:relative;
}
.inner img{
    max-width: 100%;
    position:absolute;
    left:0;top:0;    
}

Javascript:

$("img").each(function(){
    var top_dif= ($(this).height()-$(this).parent().height())/2;
    var left_dif= ($(this).width()-$(this).parent().width())/2;
$(this).css("top",-top_dif);
$(this).css("left",-left_dif);
});

have a look my samples:
debug http://jsfiddle.net/7LLh14wL/3/ (overflow:visible)
final http://jsfiddle.net/7LLh14wL/4/ (overflow:hidden)

Answer

Without JS, you can use max-width/max-height to keep the images in the boundaries of the .frame elements. With width:auto; and height:auto the images will keep their original aspect ratio and won't be stretched over their original size.

To center the images horizontaly and verticaly in the frames, you can use :

position:absolute;
top:0; bottom:0;
left:0; right:0;
margin:auto;

DEMO

Full CSS :

.frame{
    width:300px; height:300px;
    display:inline-block;
    border:1px solid teal;
    position:relative;
}
.frame > img{
    max-width:100%; max-height:100%;
    width:auto; height:auto;
    position:absolute;
    top:0; bottom:0;
    left:0; right:0;
    margin:auto;
}
Answer

You should set only the width or height and not both, it will keep the ratio.

Using max-width and max-height will help for the smaller images.

However, you will need JS to center the larger images.

Answer

use this snippet

JS

$(".frame").each( function(){
                var imageUrl = $(this).find('img').attr("src");;
                $(this).css('background-image', 'url(' + imageUrl + ')');
                $(this).find('img').css("visiblity","hidden");
            });

Css

.frame{
     background-size:cover;
     background-position:50% 50%;
     }

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.