javascript – 如何使图像与帧保持纵横比和缩略图列表中心

我想将列表缩略图框显示为数据网格.每个缩略图必须放在具有特定宽度和高度(为了一致性)的框架中,如下所示：

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

通过将图像宽度和高度设置为帧,图像变为错误的宽高比,对于较小尺寸的图像而不是帧,它们被拉伸到帧(我不想影响较小尺寸的图像).如何在不影响图像宽高比的情况下在帧内拟合图像.我的下一个问题是,无论大小如何,我如何将图像设置为帧的中心.我应该用javascript做这个吗？请帮我

解决方法:

你不能在框架中同时适应宽度和高度以保持纵横比.您可以将图像的最大宽度或最大高度值设置为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/(溢出：可见)
最后http://jsfiddle.net/7LLh14wL/4/(溢出：隐藏)

标签：javascript,css,aspect-ratio,html,grid-layout
来源： https://codeday.me/bug/20190609/1207499.html