图片等比例撑满容器,完全居中展示,会裁剪容

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、网站不提供资料下载,如需下载请到原作者页面进行下载。