如何巧妙运用CSS定位实现不同尺寸图片等比展示？

再看常见痛点，图片等比展示为何总是出错？

在实际项目中，PM 常要求图片必须等比例缩放、无失真、且不变形。但往往会遇到以下尴尬场景：

• UI 设计好的 div 宽度固定，无法随意改动。
• 后端返回的图片尺寸千差万别，既有宽大也有高瘦。
• 玩意儿”。
• 传统的 width/height 固定写法会导致图片在响应式布局下失真。

至于主要思路，让父容器决定尺寸。子图通过 CSS 定位保持比例

主要是先确保 父元素具备响应式宽度或固定比例的占位再利用 object-fitaspect-ratio 或「伪元素 + padding」等技巧，让图片在容器内部自动等比填充。

方案一这方面。使用 object-fit

.img-wrapper {
width的观点是，100%;/* 父容器宽度自适应 */
max-width: 400px;/* 根据设计设定最大宽度 */
aspect-ratio: 1 / 1;/* 强制正方形占位 */
overflow: hidden;/* 隐藏溢出部分 */
}
.img-wrapper img {
width的观点是，100%;height: 100%;按理说，object-fit: cover;/* 保持比例并覆盖整个容器，可改为 contain */
}

从方案二来看。