记得刚学前端时，不会调整img标签引入图片的比例，看着图片被拉伸，以及布局错乱，影响视觉一致性很丑。一开始想着用ps调整好图片的宽高和比例再引入但是这样也太麻烦了，在某些场合例如用户上传头像的场景下，必须保证图片比例正确。所以呢我总结了一下我学过的调整图片比例的几种方法，希望对读者有帮助捏。
第一种是我最常用的，控制img标签父容器的padding-top/bottom属性的百分比值，图片通过绝对定位铺满容器，从根本上锁定比例。html，css代码如下：
<div class="img-container">
<img src="example.jpg" alt="示例图">
</div>/* 比例容器：以16:9为例（9/16=56.25%） */
.img-container {
position: relative;
width: 100%; /* 宽度自适应父容器，可设固定值 */
padding-top: 56.25%; /* 16:9比例核心，高度由padding撑起 */
overflow: hidden;
}
.img-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* 保证图片填充容器且不变形 */
}需要注意的是，图片比例可以自己调整，比如我需要一个600px宽，400px高的图片，在
img标签的父容器上给定width : 600px;height : 400px，图片依旧用绝对定位填满容器即可实现固定比例的效果。这种写法的好处是可以适配响应式布局（如移动端、大屏适配），兼容所有现代浏览器及低版本 IE，比较通用。 第二种是object-fit属性法，直接作用于
img标签的宽高，无需额外容器，仅控制图片自身的裁剪 / 缩放逻辑。html，css代码如下：<img src="example.jpg" class="img-fixed" alt="示例图">.img-fixed {
width: 300px; /* 容器宽度 */
height: 200px; /* 容器高度（按比例设定） */
object-fit: cover; /* 填充容器，裁剪超出部分，保持比例 */
/* 可选值：contain（完整显示，留空白）/fill（拉伸填充，不推荐）/none（原尺寸） */
}
第三种方法是aspect-ratio属性法，利用CSS 原生aspect-ratio属性直接定义元素宽高比，无需额外容器或 padding 计算，语法简洁，也很好用。html css代码如下：
<img src="example.jpg" class="img-ratio" alt="示例图">.img-ratio {
width: 100%;
aspect-ratio: 16/9; /* 直接设定16:9比例 */
object-fit: cover; /* 可选，优化显示效果 */
}以上所有方法都是为了避免固定住图片的宽高，这样会导致上传的图片不匹配原图比例，写好图片比例后浏览器按设定比例自动计算尺寸，以保证图片视觉完整性。
A really good blog and me back again.