如何在缩略图列表中将图像适合帧保持宽高比和中心 [英] 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>  

通过将图像宽度和高度设置为帧，图像会变为错误的宽高比，框架，它们被拉伸到框架（我不想影响更小尺寸的图像）。如何在框架中适合图像，而不影响图像的纵横比。我的下一个问题是如何设置图像中心的框架，无论大小是什么。我应该用javascript这样做？请帮助我

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

推荐答案

您不能在框架中同时调整宽度和高度以保持宽高比。您可以将图像的最大宽度或最大高度值设置为100％以适应框架。试试我的代码。我在我的项目中使用这种方法。我使用wrap和inner在框架中获得边框和填充。
不需要JavaScript来拟合图像。但是你必须使用框架中心的图像，因为单个图像的宽度和高度是动态值。我的示例设置图像的最大宽度以适应框架。
HTML ：

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： b

$("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/ （overflow：visible ）

final http：// jsfiddle.net/7LLh14wL/4/ （overflow：hidden）

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

这篇关于如何在缩略图列表中将图像适合帧保持宽高比和中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！