自己做网站要学什么软件,学做美食看哪个网站,中天建设集团有限公司是央企吗,中国的科技成就像uniapp image标签一样对图片进行缩放和裁剪 0 前言提示1 实现1.1 不保持纵横比缩放图片#xff0c;使图片的宽高完全拉伸至填满 image 元素1.2 保持纵横比缩放图片#xff0c;使图片的长边能完全显示出来。也就是说#xff0c;可以完整地将图片显示出来。1.3 保持纵横比缩… 像uniapp image标签一样对图片进行缩放和裁剪 0 前言提示1 实现1.1 不保持纵横比缩放图片使图片的宽高完全拉伸至填满 image 元素1.2 保持纵横比缩放图片使图片的长边能完全显示出来。也就是说可以完整地将图片显示出来。1.3 保持纵横比缩放图片只保证图片的短边能完全显示出来。也就是说图片通常只在水平或垂直方向是完整的另一个方向将会发生截取。1.4 宽度不变高度自动变化保持原图宽高比不变1.5 高度不变宽度自动变化保持原图宽高比不变1.6 不缩放图片只显示图片的不同区域 2 完整代码 0 前言提示
在使用uniapp开发时觉着image标签的mode属性非常的使用符合多种开发场景并且最近有在整理object-fit和object-position的笔记正好利用css属性按照image标签对于图片的缩放和裁剪处理总结一套自己的经验。 模式值说明缩放scaleToFill不保持纵横比缩放图片使图片的宽高完全拉伸至填满 image 元素缩放aspectFit保持纵横比缩放图片使图片的长边能完全显示出来。也就是说可以完整地将图片显示出来。缩放aspectFill保持纵横比缩放图片只保证图片的短边能完全显示出来。也就是说图片通常只在水平或垂直方向是完整的另一个方向将会发生截取。缩放widthFix宽度不变高度自动变化保持原图宽高比不变缩放heightFix高度不变宽度自动变化保持原图宽高比不变裁剪top不缩放图片只显示图片的顶部区域裁剪bottom不缩放图片只显示图片的底部区域裁剪center不缩放图片只显示图片的中间区域裁剪left不缩放图片只显示图片的左边区域裁剪right不缩放图片只显示图片的右边区域裁剪top left不缩放图片只显示图片的左上边区域裁剪top right不缩放图片只显示图片的右上边区域裁剪bottom left不缩放图片只显示图片的左下边区域裁剪bottom right不缩放图片只显示图片的右下边区域
1 实现
整体效果图 以下css全是设置给img标签的 1.1 不保持纵横比缩放图片使图片的宽高完全拉伸至填满 image 元素
width: 200px;
height: 200px;
/* 核心 */
object-fit: fill;1.2 保持纵横比缩放图片使图片的长边能完全显示出来。也就是说可以完整地将图片显示出来。
width: 200px;
height: 200px;
/* 核心 */
object-fit: contain;1.3 保持纵横比缩放图片只保证图片的短边能完全显示出来。也就是说图片通常只在水平或垂直方向是完整的另一个方向将会发生截取。
width: 200px;
height: 200px;
/* 核心 */
object-fit: cover;1.4 宽度不变高度自动变化保持原图宽高比不变
width: 200px;
height: auto;1.5 高度不变宽度自动变化保持原图宽高比不变
width: auto;
height: 200px;1.6 不缩放图片只显示图片的不同区域
width: 200px;
height: 200px;
object-fit: none;
/* 核心 */
object-position: X轴位置 Y轴位置;比如只显示图片的顶部区域object-position: center bottom; 比如只显示图片的左上边区域object-position: left top; 比如只显示图片的右下边区域object-position: right bottom;
2 完整代码
!DOCTYPE html
html langzhheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle.box {width: 900px;height: auto;display: grid;grid: auto-flow minmax(300px, max-content) / repeat(3, 300px);column-gap: 5px;row-gap: 20px;margin: 0 auto;}.boxdiv {display: grid;place-items: center;place-content: center;background: #000;}.boxdivspan {color: #fff;min-height: 30px;text-align: center;margin-top: 10px;}.boxdivimg {background: #aaa;}.basic {width: 200px;height: 200px;}.fixed-width {width: 200px;height: auto;}.fixed-height {height: 200px;width: auto;}/style
/headbodydiv classboxdivspan不保持纵横比缩放图片使图片的宽高完全拉伸至填满 image 元素/spanimg classbasic src./image/big.jpg alt srcset styleobject-fit: fill //divdivspan保持纵横比缩放图片使图片的长边能完全显示出来。也就是说可以完整地将图片显示出来/spanimg classbasic src./image/big.jpg alt srcset styleobject-fit: contain //divdivspan保持纵横比缩放图片只保证图片的短边能完全显示出来。也就是说图片通常只在水平或垂直方向是完整的另一个方向将会发生截取/spanimg classbasic src./image/big.jpg alt srcset styleobject-fit: cover //divdivspan宽度不变高度自动变化保持原图宽高比不变/spanimg classfixed-width src./image/tall.jpg alt srcset //divdiv stylegrid-column: 2 / span 2;span高度不变宽度自动变化保持原图宽高比不变/spanimg classfixed-height src./image/big.jpg alt srcset //divdivspan不缩放图片只显示图片的顶部区域/spanimg classbasic src./image/tall.jpg alt srcsetstyleobject-position: center top;object-fit: none; //divdivspan不缩放图片只显示图片的底部区域/spanimg classbasic src./image/tall.jpg alt srcsetstyleobject-position: center bottom;object-fit: none; //divdivspan不缩放图片只显示图片的中间区域/spanimg classbasic src./image/tall.jpg alt srcsetstyleobject-position: center center;object-fit: none; //divdivspan不缩放图片只显示图片的左边区域/spanimg classbasic src./image/tall.jpg alt srcsetstyleobject-position: left center ;object-fit: none; //divdivspan不缩放图片只显示图片的右边区域/spanimg classbasic src./image/tall.jpg alt srcsetstyleobject-position: right center;object-fit: none; //divdivspan不缩放图片只显示图片的左上边区域/spanimg classbasic src./image/tall.jpg alt srcsetstyleobject-position: left top;object-fit: none; //divdivspan不缩放图片只显示图片的右上边区域/spanimg classbasic src./image/tall.jpg alt srcsetstyleobject-position: right top;object-fit: none; //divdivspan不缩放图片只显示图片的左下边区域/spanimg classbasic src./image/tall.jpg alt srcsetstyleobject-position: left bottom;object-fit: none; //divdivspan不缩放图片只显示图片的右下边区域/spanimg classbasic src./image/tall.jpg alt srcsetstyleobject-position: right bottom;object-fit: none; //div/div
/body/html
