如何使不同高度的img元素显示指定图片区域且无拉伸变形

要实现需求，核心是利用CSS的object-fit和object-position属性配合，针对不同高度的图片元素设置对应的显示规则：

核心思路 #

• 100px高度的元素：保持你之前使用的object-fit: cover，让图片完整填充元素且不拉伸变形。
• 50px高度的元素：用object-fit: none强制图片保留原始尺寸（避免挤压拉伸），再通过object-position: 0 0指定显示图片的左上角区域（即上半部分），结合50px的元素高度，自然截取图片上半部分内容。

修改后的代码 #

1. 基础CSS样式 #

给.newElement类设置通用样式，减少JS内联样式的冗余：

.newElement {
  position: fixed;
  width: 50px;
  top: 50px;
  /* 通用默认规则，后续JS根据高度覆盖 */
  object-fit: cover;
  object-position: center center;
}

2. 修改后的JS代码 #

在原有逻辑基础上，补充针对不同duration的图片显示规则：

function spawnNote(position, duration, noteNum){
  const element = document.createElement("img");
  // 基础样式通过CSS类实现，仅添加类和ID
  element.classList.add("newElement");
  element.id = "note" + noteNum;
  document.body.appendChild(element);
  element.src = "temp.jpeg";

  // 位置设置
  element.style.left = position === "left" ? "10px" : "100px";

  // 高度及图片显示规则
  if(duration === 1){
    element.style.height = "50px";
    element.style.objectFit = "none"; // 保留图片原始尺寸，不缩放
    element.style.objectPosition = "0 0"; // 显示图片左上角区域（上半部分）
  } else {
    element.style.height = "100px";
    element.style.objectFit = "cover"; // 保持原有正常显示逻辑
  }
}

说明 #

• object-fit: none：强制图片维持原始宽高比和尺寸，不会为适配元素而缩放，超出元素的部分会被自动裁剪。
• object-position: 0 0：将图片左上角与元素左上角对齐，确保50px高的元素只显示图片的上半部分。
• 如果你的图片原始高度恰好为100px，50px高的元素会精准截取上半部分50px的内容，完全匹配需求。

内容的提问来源于stack exchange，提问作者Ijustwanticecrea