图片适应容器大小的几种实现方法

·  阅读 22

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第12天,点击查看活动详情

方法一: css背景图

background-size: contain;
复制代码

方法二: css object-fit

  • contain 被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加

  • cover 被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配,该对象将被剪裁以适应内容框。

  • fill被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配,那么该对象将被拉伸以适应内容框。

  • none 被替换的内容将保持其原有的尺寸。

  • scale-down 内容的尺寸与 none 或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些。

image.png

<!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,
  };
};
复制代码

待更新

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改