使用object-fit:contain时为窄于容器的图片添加圆角

你遇到的问题是：img元素设置了width:100%，所以border-radius是作用在整个容器宽度的元素上，而非object-fit:contain后实际显示的图片内容（此时图片宽度小于容器），因此看不到贴合图片边缘的圆角效果。

修改方案 #

给图片包裹一层容器，让容器自适应图片的实际显示尺寸，将圆角、阴影等样式移到这个容器上，具体代码如下：

修改后的HTML

<div class="container">
  <div class="image-wrapper">
    <img src="https://krolop-gerst.com/wp-content/uploads/2021/10/20210618-LUMIX-S-50-F1.8-an-DC-S5-1-640-Sek.-bei-f-18-50-mm-ISO-160-NASENLOeCHER-2.jpg">
  </div>
  <div class="footer">
  </div>
</div>

修改后的CSS

.container {
  padding: 1rem;
  width: 200px;
  height: 400px;
  background-color: #333;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.image-wrapper {
  flex-grow: 1;
  margin: auto; /* 让容器在可用空间中居中 */
  border-radius: .3rem;
  box-shadow: 1px 1px 10px #222;
  overflow: hidden; /* 确保图片内容不会超出圆角容器 */
  background-color: #444;
}

img {
  height: 100%;
  width: auto; /* 让图片宽度自适应比例 */
  object-fit: contain;
}

.footer {
  border-radius: .3rem;
  flex-shrink: 0;
  height: 200px;
  background-color: #222;
}

核心逻辑说明 #

1. .image-wrapper：作为flex子项，flex-grow:1占据容器的可用空间，margin:auto让它在空间中水平垂直居中，同时会根据内部图片的实际宽度自动收缩，确保圆角贴合图片边缘；overflow:hidden保证图片内容不会超出圆角容器的范围。
2. img元素：调整width:auto、height:100%，结合object-fit:contain，图片会保持原有比例在容器高度限制下缩放，宽度自动适配，不再强制占满父容器宽度。
3. 样式迁移：将原本img上的border-radius、box-shadow、background-color移到.image-wrapper上，让样式作用在图片的实际显示区域。

该方案完全兼容Chrome和Safari，符合你的需求。

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