如何为使用object-fit:scale-down缩放的图片添加边框

你遇到的问题根源在于 object-fit: scale-down 仅调整图片内容在 <img> 元素内部的显示逻辑，但 <img> 元素本身仍占据容器的完整尺寸，因此边框会围绕整个容器而非缩放后的图片内容。以下是两种可行的解决方案：

方案一：CSS 包装器实现（无需 JavaScript） #

通过给图片添加一层包装容器，让容器自动适配缩放后的图片尺寸，再给容器添加边框。这种方法无需修改原有 JavaScript 逻辑，实现简单。

修改步骤： #

1. 更新 HTML：在 <img> 外层新增一个包装 div：

<div id="slide-div" class="picture-div">
  <div class="img-wrapper">
    <img class="picture-div-img">
  </div>
</div>

2. 调整 CSS：

.picture-div {
  width: 100%;
  height: 100%;
  /* 使用 Flex 布局居中包装容器 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-wrapper {
  /* 给包装容器添加边框 */
  border: 2px solid black;
  /* 让容器收缩以适配内部图片尺寸 */
  display: inline-block;
}

.picture-div-img {
  /* 替代 object-fit: scale-down，自动缩放图片以适应容器 */
  max-width: 100%;
  max-height: 100%;
}

方案二：JavaScript 计算尺寸（直接给 <img> 添加边框） #

如果你更倾向于直接给 <img> 元素使用 border 系列样式，可以通过 JavaScript 计算图片缩放后的实际尺寸，调整 <img> 元素的大小并居中，再添加边框。

修改步骤： #

1. 调整 CSS：移除 <img> 的固定宽高和 object-fit 属性，同时设置容器为 Flex 居中：

.picture-div {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.picture-div-img {
  box-sizing: border-box; /* 确保边框不会额外增加元素尺寸 */
}

2. 更新 JavaScript：在图片加载完成后计算并设置缩放后的尺寸：

const duration = 2000; // 每张幻灯片展示时长（毫秒）
const sizes = [
  [4000, 500],
  [1000, 4000],
  [600, 400],
  [100, 200]
];
const sleep = ms => new Promise(r => setTimeout(r, ms));
let size_index = 0;

function show_slides(duration) {
  let this_duration = duration;
  const my_parent = document.querySelector('#slide-div');
  if (size_index == sizes.length) {
    size_index = 0;
  }
  let w = sizes[size_index][0];
  let h = sizes[size_index][1];
  ++size_index;

  let my_randomizer = `https://placehold.co/${w}x${h}?text=${w}+x+${h}\npx`;
  fetch(my_randomizer)
    .then(my_response => my_response.blob())
    .then(my_blob => {
      let my_url = URL.createObjectURL(my_blob);
      sleep(this_duration)
        .then(() => {
          const img = my_parent.querySelector('img');
          URL.revokeObjectURL(img.src);
          img.src = my_url;
          
          // 图片加载完成后计算缩放尺寸
          img.onload = function() {
            const containerWidth = my_parent.clientWidth;
            const containerHeight = my_parent.clientHeight;
            const imgNaturalWidth = img.naturalWidth;
            const imgNaturalHeight = img.naturalHeight;
            
            // 计算缩放比例（保持宽高比，仅缩小不放大）
            const scaleX = containerWidth / imgNaturalWidth;
            const scaleY = containerHeight / imgNaturalHeight;
            const scale = Math.min(scaleX, scaleY, 1);
            
            // 设置图片缩放后的尺寸
            img.style.width = `${imgNaturalWidth * scale}px`;
            img.style.height = `${imgNaturalHeight * scale}px`;
            
            // 添加边框
            img.style.border = '2px solid black';
          };
          
          show_slides(duration);
        });
    })
    .catch(my_error => console.error('Error: ', my_error));
}

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