CSS图片画廊：300px固定容器图片适配与署名对齐问题

核心需求拆解 #

• 横版、竖版图片需完整展示在300px×300px固定尺寸容器内
• 图片对齐容器底部
• 版权署名需对齐图片实际渲染的右边缘，而非容器右边缘

问题根源 #

原有代码中图片父容器强制撑满300px宽度，object-fit: contain 缩放图片时，竖版图片左右会出现留白，此时直接给署名加右对齐，只会对齐容器边缘，无法贴合图片本身的边缘。

修正方案 #

核心思路是新增图片+署名的自适应包裹层，让包裹层宽度跟随图片缩放后的实际宽度，再将包裹层在固定容器内底部居中，署名在包裹层内右对齐即可完美适配横竖图场景。

完整修正代码 #

CSS样式

.gallery {
  display: flex;
  gap: 10px;
}
.gallery_item_square {
  width: 300px;
  background: brown;
}
/* 300px固定尺寸图片容器 */
.gallery_square {
  width: 300px;
  height: 300px;
  background: #000;
  /* 内容靠底、水平居中 */
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.gallery_description {
  padding: 8px;
  background: #fff;
}
/* 图片+署名自适应包裹层 */
.img_wrap {
  height: 100%;
  width: fit-content;
  max-width: 100%;
}
/* 图片适配规则 */
.image_contain {
  display: block;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom center;
}
/* 署名对齐：自动贴合图片右边缘 */
.attribution {
  display: block;
  text-align: right;
  padding: 4px 0;
  font-size: 12px;
  background: orange;
}

HTML结构

<div class="gallery">
  <div class="gallery_item_square">
    <div class="gallery_square">
      <div class="img_wrap">
        <img class="image_contain" src="https://acrossky.github.io/Images/3W6A8814.jpg">
        <span class="attribution"><a href="source">ARC/Qedema</a></span>
      </div>
    </div>
    <div class="gallery_description">
      <p>This is a description</p>
    </div>
  </div>
  <div class="gallery_item_square">
    <div class="gallery_square">
      <div class="img_wrap">
        <img class="image_contain" src="https://acrossky.github.io/Images/3W6A8817.jpg">
        <span class="attribution"><a href="source">ARC/Qedema</a></span>
      </div>
    </div>
    <div class="gallery_description">
      <p>This is a description</p>
    </div>
  </div>
</div>

效果说明 #

• 横版图片：缩放后宽度撑满300px容器，包裹层宽度等于容器宽度，署名对齐容器右边缘即图片右边缘，图片底部对齐容器底
• 竖版图片：缩放后高度撑满300px容器，宽度小于300px，包裹层宽度和图片实际宽度一致，署名自动对齐图片右边缘，不会出现在侧边留白区域
• 所有图片不会被裁剪，完整展示

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