最近在做项目的过程中,需要把图片正方形展示出来,多余的部分进行裁剪。但是从后端接口拿过来的图片可能有各种各样的形状。把自己实现的过程分享出来,大家有不满的,欢迎批评指导。
总的过程分为以下几步:
1、生产正方形的块
2、获取图片的原始尺寸,选择适应的样式
一、生产正方形的块
运用css生成块的方法很多,我用的是padding的方法。
<div class="box">
<img id="ID" src="src">
</div>
.box{
width:100%;
padding-bottom:100%; // 定义基于父元素宽度的百分比下内边距
height:0; // 去除多余的高度 保证是正方形
overflow: hidden; //多余的部分进行裁剪
/* 不管图片的尺寸是多大 都进行居中显示 */
display: -webkit-flex; /* Safari */
display: flex;
overflow: hidden;
justify-content: center;
align-items: center;
}
二、获取图片原始尺寸,根据宽高选择合适样式
首先判断图片是否被浏览器缓存,缓存的话,直接获取原始尺寸,没有缓存的话,需要先加载图片,加载完成以后获取图片原始尺寸。
let newImg = new Image() // 创建图片
newImg.src = "url" // 图片的url
if (newImg.complete) { // 图片是否存在与浏览器缓存
// 判断图片的宽高 选择合适的样式
if (newImg.width > newImg.height) {
document.getElementById('').setAttribute('class', 'imgHeight')
} else {
document.getElementById('ID').setAttribute('class', 'imgWidth')
}
} else { // 图片不在浏览器中
newImg.onload = () => { // 图片加载完成 获取宽高
// 判断图片的宽高 选择合适的样式
if (newImg.width > newImg.height) {
document.getElementById('ID').setAttribute('class', 'imgHeight')
} else {
document.getElementById('ID').setAttribute('class', 'imgWidth')
}
}
}
样式:
.imgWidth{
width: 100%;
height: auto;
}
.imgHeight{
width: auto;
height: 100%;
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。