本文提供代码实例详细讲解如何使用JavaScript实现图片等比例缩放裁切，包括作为背景图片和子元素时的处理方法，利用CSS的background-size属性以及自定义函数实现图片填充并裁切。
本文将通过代码实例详细介绍一下如何实现图片等比例缩放裁切效果。
图片有两种应用方式，一种作为子元素存在，一种是作为背景图片。
在每一种应用方式中，图片的等比例缩放又可以大致分为如下几种情况：
（1）.确保图片能够填充满元素，超出的部分被裁切或者隐藏。
（2）.确保图片的长或者宽填充满元素，超出的部分被裁切或者隐藏。
下面通过代码实例分别介绍一下上述列举的中可能，需要的朋友可以做一下参考。
一.作为背景图片：
通过CSS的background-image属性可以设置元素的背景图片效果。
下面就以如下图片进行相关演示：
上述图片的尺寸是350*262，下面首先看一段代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>background-clip属性-web前端开发学习扣qun：731771211 详细教程分享</title>
<style type="text/css">
div{
border:10px solid green;
width:250px;
height:180px;
}
.bg{
background-image:url(mytest/demo/small.jpg);
background-repeat:no-repeat
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>
background-image属性设置元素背景图片，无法设置背景图片的缩放效果。
只能是原生态，顶多调整一下背景图片的位置，或者是否重复。</
最低0.47元/天 解锁文章
996
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
