img标签自适应，各个尺寸图片不变形 object-position/object-fit属性
一、object-fit：控制图片展示状态
fill: “填充”。默认值。使图片拉伸填满整个容器, 不保证保持原有的比例。
contain: “包含”。保持原有尺寸比例缩放。保证整个图片都可以出现在容器中。因此，此参数可能会在容器内留下空白。
cover: “覆盖”。保持原有尺寸比例缩放。宽度和高度至少有一个和容器一致（尺寸小的一致）。因此，此参数可能会让图片部分区域不可见。
none: “无”。保持原有尺寸比例。同时保持图片原始尺寸大小。多出的部分隐藏。
scale-down: “降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。
注意：scake-down具有动态属性：当实际图片尺寸大于容器尺寸时，表现为contain属性的结果；当实际图片尺寸小于容器尺寸时，表现为none属性的结果。
二、object-position：控制图片展示位置
object-position属性可以控制图片的展示位置，比如下图有很多留白，如果我们想让最主要的内容展示出来，就可以用这个属性控制图片位置；
三、附上测试源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.img_class{
width: 300px;
height: 300px;
border: black 1px solid;
background-color:darkgrey ;
}
.one_class{
object-fit: fill;
}
.two_class{
object-fit: contain;
object-position: left 0px bottom 100px;
}
.three_class{
object-fit: cover;
}
.four_class{
object-fit: none;
object-position: left 100px bottom 100px;
}
.div_class{
width: 350px;
float: left;
}
.div_class span{
}
</style>
</head>
<body>
<div class="div_class">
<span>未加object-fit属性时</span>
<img class="img_class" src="./img/timg%20(1).jpg">
</div>
<div class="div_class" >
<span>object-fit:fill</span>
<img class="img_class one_class" src="./img/timg%20(1).jpg">
</div>
<div class="div_class ">
<span>object-fit: contain;</span>
<p>object-position: left 0px bottom 100px;</p>
<img class="img_class two_class" src="./img/timg%20(1).jpg">
</div>
<div class="div_class">
<span>object-fit: cover;</span>
<img class="img_class three_class" src="./img/timg%20(1).jpg">
</div>
<div class="div_class">
<span> object-fit: none;</span>
<p>object-position: left 100px bottom 100px;</p>
<img class="img_class four_class" src="./img/timg%20(1).jpg">
</div>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义