携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情
方法一： css背景图
background-size: contain;
方法二： css object-fit
-
contain被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加 -
cover被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。 -
fill被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。 -
none被替换的内容将保持其原有的尺寸。 -
scale-down内容的尺寸与none或contain中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.img-container{
width:688px;
height:204px;
background: black;
}
.img-container img{
width: 100%;
height: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<div class="img-container">
<img src="./test.png" alt="">
</div>
<script>
</script>
</body>
</html>
方法三：js计算图片和容器大小
js动态计算图片尺寸及图片容器宽高 计算图片压缩比例，动态给图片赋值 获取图片原始尺寸
对比容器和图片宽高比例，取最小值为图片压缩比例。 取压缩比例再算图片宽高后赋值给图片。
export const getScaleRatio = ({ImageBox,Image}) =>{
const wRatio = ImageBox?.w / Image.w;
const hRatio = ImageBox?.h / Image.h;
const ratio = hRatio < wRatio ? hRatio : wRatio; // 得出容器的大小与图片大小的比例
return {
Ratio: ratio,
ImageWidth: Image.w * ratio,
ImageHeight: Image.h * ratio,
};
};
待更新
