保持图片的宽高比并铺满 div，图片的中心部分会被优先显示

解释：

• object-fit: cover;：这会保持图片的宽高比，并使图片覆盖整个 div，即使图片可能会被裁剪。
• object-position: center;：图片的中心部分会被优先显示，以确保图片居中。
• 使用这个样式，图片将始终以正确的比例显示，并且在 div 中居中铺满，不会出现拉伸变形的情况。

  <style>
      div {
          height: 500px;
          width: 500px;
          overflow: hidden; /* 确保图片溢出部分被裁剪 */
      }
  
      img {
          width: 100%;
          height: 100%;
          object-fit: cover; /* 保持图片的宽高比并铺满 div */
          object-position: center; /* 图片居中 */
      }
  </style>
  
  <div>
      <img src="/wp-content/uploads/2024/08/2024080904303362.jpg" alt="">
  </div>