我想将列表缩略图框显示为数据网格。 每个缩略图必须放在具有特定宽度和高度（为了保持一致）的框架中，如下所示：
<div class='frame'> <img src='img1.jpg' /> </div> <div class='frame'> <img src='img2.jpg' /> </div>通过将图像宽度和高度设置为帧，图像变为错误的宽高比，对于较小尺寸的图像而不是帧，它们被拉伸到帧（我不想影响较小尺寸的图像）。 如何在不影响图像宽高比的情况下在帧内拟合图像。 我的下一个问题是，无论大小如何，我如何将图像设置为帧的中心。 我应该用javascript做这个吗？ 请帮帮我
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
最满意答案
你不能在框架中同时适应宽度和高度以保持纵横比。 您可以将图像的最大宽度或最大高度值设置为100％以适合帧。 试试我的代码。 我在我的项目中使用此方法。 我使用wrap和inner来获取框架中的边框和填充。 拟合图像不需要javascript。 但您必须使用框架中心图像，因为单个图像的宽度和高度是动态值。 我的样本设置图像的最大宽度以适应帧。 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/ （溢出：隐藏）
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)
更多推荐
发布评论