图片等比例撑满容器,完全居中展示,会裁剪容
image-crop
图片等比例撑满容器,完全居中展示,会裁剪图片的非中心区域(类似于CSS中background-size: cover;
的效果)
图片占满容器且图片保持原有比例,完全居中展示图片,超出部分将被隐藏
使用示例<!-- 引入资源 --> <link rel="stylesheet" href="../src/image-crop.css"/> <script src="../src/image-crop.js"></script> <!-- 设置容器的样式 --> <style> .picture-width, .picture-height{ margin: 50px auto 0; width: 200px; height: 200px; } </style> <!-- 图片onload时进行裁切操作 --> <div class="picture-width ui-img-crop"> <img src="width.jpg" onload="imageCrop(this);"/> </div> <div class="picture-height ui-img-crop"> <img src="height.png" onload="imageCrop(this);"/> </div>
版权声明:
1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。2、网站不提供资料下载,如需下载请到原作者页面进行下载。