如何为适配容器的图片本身添加边框（而非容器边框）？

我来帮你搞定这个问题！你现在的困扰我太懂了——明明想让边框贴在图片上，结果它却跟着容器跑了，把整个空白区域都框起来了，对吧？

咱们先说说问题出在哪：你给.imgClass设置了width: 100%; height: 100%;，这会让img元素的尺寸完全和外层的div容器一模一样。哪怕图片因为object-fit:contain只乖乖待在中间区域，边框还是会跟着img元素的大小走，自然就变成了“容器边框”，而不是围着图片本身。

接下来就是解决办法，其实只需要改几行CSS就行：

修正后的完整代码 #

CSS 样式

.divClass {
  position: absolute;
  top: 15%;
  width: 32%;
  height: 82.5%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.imgClass {
  /* 把固定的宽高换成最大宽高限制 */
  max-width: 100%;
  max-height: 100%;
  border: 1px solid rgb(118, 180, 255);
  /* 这里的object-fit:contain可以去掉啦，因为max-width/max-height已经能让图片自动按比例适配 */
  /* 如果有特殊场景需要保留也没问题，不影响效果 */
}

HTML 结构

<div class="divClass">
  <img class="imgClass" src="url_of_image" />
</div>

咱们来验证两种你提到的场景：

• 当图片比容器大时：图片会自动按比例缩放到刚好能放进容器的最大尺寸，这时候img元素的大小和缩放后的图片完全一致，边框会紧紧贴在图片边缘，不会框住多余的空白。
• 当图片比容器小时：图片会按比例放大到容器能容纳的最大尺寸（绝对不会变形），img元素也会跟着图片的放大尺寸调整自身大小，边框依然精准地围着图片走。

这样就完全满足你要的“边框只贴合图片本身，同时图片始终按比例占满容器最大可用空间”的需求啦！

内容来源于stack exchange