Geek Answers Handbook

How to match image with frame format and center in thumbnail list

I want to show the thumbnail list window as a data grid. Each thumbnail should be placed in a frame with a certain width and height (for consistency) as follows:

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

By setting the width and height of the image in the frame, the images change to the wrong aspect ratio, and for an image smaller than the frame, they are stretched to the frame (I do not want to create a smaller image). How can I put an image in a frame without changing the aspect ratio of the image. my next question is: how to set the image in the center of the frame regardless of its size. should i do this with javascript? Please help me

+4
source share
4 answers

you cannot fit both in width and in height in a frame to maintain aspect ratio. You can set the maximum or maximum value of the image to 100% to fit the frame. try my code. I use this method in my projects. I use wrap and inner to get the border and fill in the frame. javascript is not needed to set the image. but you should use to center the image in the frame, since the width and height of an individual image are dynamic. my sample set the maximum width of the image in the 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);
});

:
debug http://jsfiddle.net/7LLh14wL/3/ (: )
final http://jsfiddle.net/7LLh14wL/4/ (: )

+1

JS max-width/max-height, .frame. width:auto; height:auto .

, :

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

DEMO

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;
}
+3

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

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

However, you will need JS to center large images.

0
source

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%;
     }
0
source

More articles:


All Articles