图片自适应居中

方案1：使用 Flexbox 布局

html

<style>
  .fit-center {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  .fit-center img {
    max-width: 100%;
    max-height: 100%;
  }
</style>

<div class="fit-center">
  <img src="your-image.jpg" alt="Description of image" />
</div>

方案2：固定容器 + object-fit: contain（始终完整显示，可能留白）

html

<style>
  .objcontain {
    width: 100%;
    height: 100%;
    overflow: hidden; /* 可选：隐藏溢出的部分 */
  }
  .objcontain img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }
</style>

<div class="objcontain">
  <img src="your-image.jpg" alt="Description of image" />
</div>

方案3：固定容器 + object-fit: cover（始终填满容器，可能裁剪）

html

<style>
  .objcover {
    width: 100%;
    height: 100%;
    overflow: hidden; /* 可选：隐藏溢出的部分 */
  }
  .objcover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
</style>

<div class="objcover">
  <img src="your-image.jpg" alt="Description of image" />
</div>