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

2019-06-09 21:21:34 阅读：272 来源： 互联网

标签：javascript css aspect-ratio html grid-layout

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

<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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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