本文将通过代码实例详细介绍一下如何实现图片等比例缩放裁切效果。
图片有两种应用方式，一种作为子元素存在，一种是作为背景图片。
在每一种应用方式中，图片的等比例缩放又可以大致分为如下几种情况：
（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属性设置元素背景图片，无法设置背景图片的缩放效果。
只能是原生态，顶多调整一下背景图片的位置，或者是否重复。
CSS3新增background-size属性，它可以设置背景图片的尺寸。
<!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-size:200px 100px;
background-repeat:no-repeat
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>
代码运行效果截图如下：
通过background-size属性为背景图片长宽赋予一个固定值，并没有刻意保证等比例缩放。
background-size属性有两个关键字属性值cover与contain，可以满足背景图片等比例缩放效果。
代码实例如下：
<!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;
margin:5px;
}
.cover{
background-image:url(mytest/demo/small.jpg);
background-size:cover;
background-repeat:no-repeat
}
.contain{
background-image:url(mytest/demo/small.jpg);
background-size:contain;
background-repeat:no-repeat
}
</style>
</head>
<body>
<div class="cover"></div>
<div class="contain"></div>
</body>
</html>
代码运行效果截图如下：
代码分析如下：
（1）.cover：此属性值会保证背景图片等比例缩放填充满元素，超出元素的部分会被隐藏裁切。
（2）.contain：此属性与cover属性类似，也是进行等比例缩放，但是它不保证填充满元素，而是确保在长或者宽某一个方位上填充满元素，比如在上述代码中，由于在高度上最先填充满元素，于是将放弃宽度上填充元素。
二.作为子元素：
如果仅要求图片在某一方位填充满父元素，那么只要将对应尺寸设置为100%即可。
图片可以实现等比例缩放，不会变形，代码实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>background-clip属性-学习前端，我们是认真的</title>
<style type="text/css">
div{
border:10px solid green;
width:300px;
height:180px;
margin:5px;
overflow:hidden;
}
div img{
height:100%
}
</style>
</head>
<body>
<div class="ant"><img src="mytest/demo/small.jpg"></div>
</body>
</html>
设置图片的高度为100%，那么可以保证在垂直方向填充满父元素，且是等比例缩放。在宽度上也是同样的道理，但是有一个问题，那就是可能在某一范围出现不能填充满父元素的情况。
无法满足布局规整的要求，下面分享一段代码实例，它可以实现图片等比例缩放填充满整个父元素，超出的部分裁切。
代码实例如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>学习前端，我们是认真的</title>
<style>
* {
margin:0px;
padding:0px;
}
div {
border:10px solid green;
width:300px;
height:200px;
font-size:0px;
}
</style>
<script>
let DrawImage = (ImgBox, ImgD, iwidth, iheight) => {
ImgBox.style.overflow = "hidden";
console.log(ImgD);
console.log(ImgD.width);
if (ImgD.width > 0 && ImgD.height > 0) {
if (ImgD.width / ImgD.height >= iwidth / iheight) {
ImgD.height = iheight;
ImgD.width = (image.width / image.height) * iheight;
}
else {
ImgD.width = iwidth;
ImgD.height = (ImgD.height / ImgD.width) * iwidth;
}
}
}
window.onload = function () {
let odiv = document.getElementsByTagName("div")[0];
let oimg = document.getElementById("ant");
DrawImage(odiv, oimg, 300, 200)
}
</script>
</head>
<body>
<div><img id="ant" src="mytest/demo/small.jpg"></div>
</body>
</html>
上述代码实现了图片等比例缩放填充满父元素的功能，代码分析如下。
函数四个参数解析如下：
（1）.ImgBox：图片的父元素，也就是它的容器元素。
（2）.ImgD：图片元素对象，也就是将要被缩放的图片。
（3）.iwidth：容器元素的宽度。
（4）.iheight：容器元素的高度。
内部代码的缩放原理简介如下：
（1）.如果图片的长宽比大于父元素的长宽比，说明图片的width相对更大，只要将图片的高度设置为容器的高度即可，图片宽度会超出容器的高度，进行裁切即可。
（2）.如果图片的长宽比小于父元素的长宽比，说明图片的height相对更大，只要将图片的宽度设置为容器的宽度即可，图片高度户会超出容器的高度，进行裁切即可。
（3）.如果图片的长宽比恰好等于父元素的长宽比，只要对宽度所放至容器的宽度即可，这很好理解。
这都是基础的数学问题，感觉无法介绍的再详细的，如有任何问题可以在文章后面留言。
更多编程知识分享，关注v-x公众号id:mtbcxx