4

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

web-tiki
  • 99,765
  • 32
  • 217
  • 249
Credion Mois
  • 75
  • 1
  • 7
  • do the frames have a fixed height/ width? are they percentages? do they have a specific aspect ratio? are the tumbnail any orientation (portait or landscape)? – web-tiki Sep 11 '14 at 09:52
  • I would use the background-image property instead of an image, and there you can use the background-size property to be contain and the background-position to be center – Ohad Milchgrub Sep 11 '14 at 09:53
  • 1
    this might help : http://stackoverflow.com/questions/20456694/responsive-square-columns/20457076#20457076 – web-tiki Sep 11 '14 at 09:53
  • @web-tiki, yes frames have fixed height/ width (not percentage). both may be. I mean some pic are portrait and samy may pe landscape – Credion Mois Sep 11 '14 at 09:55

4 Answers4

4

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;
}
web-tiki
  • 99,765
  • 32
  • 217
  • 249
  • it works, but I want to know how can I get @Mioonion Rai 's answer's output without js, can I achieve? I means for image larger than size of frame in width or height, I want to set width to 100% and hide extra portion of image vertically and centering it vertically? – Credion Mois Sep 11 '14 at 10:16
  • no I don't want image larger height than frame to fit vertically, in priority, I want to fit horizontally and hide overflow. Thanks – Credion Mois Sep 11 '14 at 10:30
  • @CredionMois You can add `max-height:100%;` for that : http://jsfiddle.net/webtiki/eq1utgtg/4/ – web-tiki Sep 11 '14 at 10:32
  • not yet! see your second image, it's height should not be set to fit vertically, instead, fit horizontally and hide (top and bottom overflows). anyway, without js, your result is very useful for me Thanks in advance. – Credion Mois Sep 11 '14 at 10:43
  • @CredionMois ah, sorry, I misunderstood, I should have suggested `max-width:100%;` instead of `max-height:100%;` http://jsfiddle.net/webtiki/eq1utgtg/5/ – web-tiki Sep 11 '14 at 10:46
1

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)

Mioonion Rai
  • 36
  • 3
  • your result what I want to do, but I wonder it can be done without jquery, please explain me. – Credion Mois Sep 11 '14 at 10:32
  • you can't do that without js unless you can get initialized value of difference of image width from frame width. but if you want to achieve this without js, you can try with the help of server side code such as php if your project is not static site,i.e, **you can get size of image with php and calculate left and top value and simply echo them to css values.** But this is not good approach as server will load unnecessary burden and you have to assign inline css style codes in your each images. – Mioonion Rai Sep 11 '14 at 10:50
0

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.

hereismass
  • 223
  • 1
  • 14
0

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%;
     }
Umer Farook
  • 368
  • 2
  • 5