在网页开发过程中，图片是页面展示的重要组成部分，然而如果图片的原始长宽比和容器设定的尺寸不匹配，很容易出现图片被拉伸、压缩变形的情况，影响页面的整体视觉效果。想要保持HTML图片的长宽比，需要结合对应的CSS属性来实现，下面介绍几种常用的实用技巧。
使用aspect-ratio属性直接设置长宽比
CSS的aspect-ratio属性可以直接定义元素的首选长宽比，只要给图片容器或者图片本身设置这个属性，就能直接固定长宽比例，避免图片变形。这个属性现代浏览器支持度已经比较高，使用起来也非常简单。
如果是直接给图片设置长宽比，可以参考下面的代码：
/* 给图片设置16:9的长宽比 */
img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover; /* 如果图片比例和设置的不一致，裁剪多余部分 */
}如果是给图片的父容器设置长宽比，再让图片填充容器，代码如下：
<div class="img-container">
<img src="demo.jpg" alt="示例图片">
</div>.img-container {
width: 100%;
aspect-ratio: 4 / 3; /* 设置容器为4:3的长宽比 */
}
.img-container img {
width: 100%;
height: 100%;
object-fit: cover;
}利用padding技巧实现长宽比固定
在aspect-ratio属性还没广泛支持的时候，padding技巧是保持元素长宽比的常用方案。这个技巧的原理是利用padding的百分比是相对于父元素宽度计算的特性，来固定容器的高度比例。
通常使用padding-top来设置比例，计算公式如下：padding-top百分比 = 高度 / 宽度 * 100%。比如要保持16:9的比例，padding-top就是9/16*100%=56.25%。
具体实现代码如下：
<div class="ratio-box">
<img src="demo.jpg" alt="示例图片">
</div>.ratio-box {
width: 100%;
padding-top: 56.25%; /* 16:9的长宽比对应的padding-top值 */
position: relative;
overflow: hidden;
}
.ratio-box img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}使用object-fit属性处理图片填充方式
object-fit属性用来指定替换元素（比如<img>、<video>）的内容如何适应到其使用的高度和宽度确定的框。它虽然不能直接设置长宽比，但是配合固定尺寸的容器使用，可以避免图片变形，是保持图片展示效果的重要属性。
object-fit有以下几个常用值：
- fill：默认值，图片会被拉伸填满容器，可能会变形
- contain：图片会保持原始比例缩放，直到宽度和高度都适应容器，可能会有留白
- cover：图片会保持原始比例缩放，直到填满容器，多余的部分会被裁剪
- none：图片保持原始尺寸，不会缩放
- scale-down：图片的尺寸和none或者contain中更小的那个一致
使用示例：
/* 固定容器尺寸，让图片保持比例填充 */
.img-wrap {
width: 300px;
height: 200px; /* 容器固定尺寸 */
}
.img-wrap img {
width: 100%;
height: 100%;
object-fit: cover; /* 保持比例裁剪多余部分 */
}不同场景下的方案选择
如果是开发现代浏览器适配的项目，优先使用aspect-ratio属性，代码简洁且逻辑清晰；如果需要兼容较旧的浏览器，可以选择padding技巧实现长宽比固定；如果容器尺寸已经固定，只需要处理图片的填充方式，使用object-fit属性即可。
另外需要注意，如果图片的原始比例和设定的长宽比差异过大，即使保持了比例，也可能会出现图片内容被大量裁剪或者留白过多的情况，这时候需要提前和设计师确认好图片的展示要求，选择合适的比例参数。
HTMLimage_aspect_ratioCSSobject_fit修改时间：2026-06-03 22:22:35