html等比显示图片

等比显示图片的原理

图片等比显示的核心是保持宽高比例不变,通过缩放适应容器尺寸，当图片宽高比与容器不同时，需自动调整尺寸并留白或裁剪多余部分。

核心实现方案

基础img标签属性法

<img src="image.jpg" width="100%" height="auto" />

• 原理：宽度设为百分比自动缩放，高度auto保持比例
• 注意：需显式声明宽度或高度中的一个

CSS控制法（推荐）

.container {
  width: 300px;
  height: 200px;
  overflow: hidden; / 防止溢出 /
}
.container img {
  width: 100%;
  height: 100%;
  object-fit: contain; / 保持比例缩放 /
}

<div class="container">
  <img src="image.jpg" />
</div>

高级object-fit用法

常见问题处理

浏览器兼容处理

img {
  width: 100%;
  height: auto; / 兼容IE/
}
@supports (object-fit: cover) {
  .container img {
    object-fit: cover; / 现代浏览器/
  }
}

响应式布局适配

.responsive-img {
  max-width: 100%;
  height: auto;
}

<img class="responsive-img" src="image.jpg" />

相关问题与解答

Q1：如何让图片在容器内居中显示？

A：

.center-img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}

Q2：如何处理不同比例的图片自适应？

A：

@media (max-width: 600px) {
.container img {
object-fit: scale-down; / 小屏不放大 /
}