本文将通过代码实例详细介绍一下如何实现图片等比例缩放裁切效果。
图片有两种应用方式，一种作为子元素存在，一种是作为背景图片。
在每一种应用方式中，图片的等比例缩放又可以大致分为如下几种情况：
（1）.确保图片能够填充满元素，超出的部分被裁切或者隐藏。
（2）.确保图片的长或者宽填充满元素，超出的部分被裁切或者隐藏。

一.作为背景图片：
通过CSS的background-image属性可以设置元素的背景图片效果。
下面首先看一段代码实例：

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.cxvn.com/" />
<title>background-clip属性-乐分享</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.cxvn.com/" />
<title>background-clip属性-乐分享</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.cxvn.com/" />
<title>background-clip属性-乐分享</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.cxvn.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.cxvn.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）.如果图片的长宽比恰好等于父元素的长宽比，只要对宽度所放至容器的宽度即可，这很好理解。

1.《CSS图片等比例缩放裁切详解》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。

2.《CSS图片等比例缩放裁切详解》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。

3.文章转载时请保留本站内容来源地址，https://www.cxvn.com/study/225.html