网格图片容器适配需求：图片宽度不足时两侧显示放大边框

我刚好处理过类似的需求，这个问题核心是要把容器左右的留白替换成图片边缘放大后的效果，而不是生硬的纯色边框。下面给你两种可行的方案，你可以根据自己的场景选择：

方案一：精准适配（需要少量JS） #

这种方案会根据每张图片的实际宽度计算留白，然后用伪元素截取图片边缘填充，适配性最强。

1. 基础HTML结构（假设你的结构是这样） #

<div class="image-grid">
  <div class="image-container">
    <img src="your-image-path.jpg" alt="图片描述">
  </div>
  <!-- 更多网格项 -->
</div>

2. CSS代码实现 #

/* 固定宽度的图片容器 */
.image-container {
  width: 400px; /* 替换成你的容器固定宽度 */
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

/* 让图片居中显示，宽度不超过容器，高度自适应 */
.image-container img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 左侧填充：截取图片左边缘，拉伸填充左侧留白 */
.image-container::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  /* 计算左侧留白宽度：容器总宽减去图片实际宽度的一半 */
  width: calc((100% - var(--img-width)) / 2);
  background-image: inherit;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: auto 100%; /* 高度和原图一致，宽度拉伸填充 */
}

/* 右侧填充：截取图片右边缘，拉伸填充右侧留白 */
.image-container::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: calc((100% - var(--img-width)) / 2);
  background-image: inherit;
  background-position: right center;
  background-repeat: no-repeat;
  background-size: auto 100%;
}

3. 补充JS代码（获取图片实际宽度） #

我们需要在图片加载完成后，把图片的实际宽度传给CSS变量，同时把图片地址同步给容器的背景图（让伪元素能继承）：

// 给所有图片绑定加载完成事件
document.querySelectorAll('.image-container img').forEach(img => {
  img.onload = function() {
    const container = this.parentElement;
    const imgActualWidth = this.offsetWidth;
    // 设置CSS变量存储图片宽度
    container.style.setProperty('--img-width', `${imgActualWidth}px`);
    // 把图片地址同步给容器的背景图
    container.style.backgroundImage = `url(${this.src})`;
  };
  // 针对缓存的图片，手动触发onload
  if (img.complete) img.onload();
});

方案二：简化版（无需JS，适合固定比例场景） #

如果你的网格项是固定宽高比的，这个方案更简单，用背景图叠加实现：

.image-container {
  width: 400px;
  height: 300px; /* 替换成你的固定高度，保证比例统一 */
  background-image: url('your-image-path.jpg');
  background-position: center;
  background-size: cover; /* 背景图铺满容器 */
  position: relative;
}

.image-container img {
  width: auto;
  height: 100%; /* 图片高度和容器一致 */
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* 图片水平居中 */
}

原理很简单：容器的背景图用cover铺满整个容器，然后把原图居中放在背景图上面。当原图宽度不够时，背景图的边缘就会显露在左右两侧，看起来就像是原图的边框被放大填充了留白。

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