宽度拉伸：把width设置成100%，height设置auto
高度拉伸：把height设置成100%，width设置auto
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片自适应</title><style>div {width: 500px;height: 300px;border: 1px solid black;/* 使得图片居中对齐 */text-align: center;margin: 20px auto;/* 使得图片居中对齐 *//* display: flex;align-items: center;justify-content: center; */}img {/* flex: 1; *//* width: 100%;height: auto; *//* margin: 0 auto; */width: auto;height: 100%;}</style>
</head>
<body><div><img src="01.jpg" alt=""></div><div><img src="02.jpeg" alt=""></div>
</body>
</html>效果如下：
此例子是宽度自适应，如果是高度自适应互换宽和高即可
![[考研数学]概率论难点总结：样本标准差，样本均值，均值的期望和方差，与t分布、卡方分布和F分布的关系及推导](https://img-blog.csdnimg.cn/20201016120115461.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F3ZTkwMA==,size_16,color_FFFFFF,t_70#pic_center)
