Bootstrap如何让图片在Col中实现1:1比例且带有圆角效果-Bootstrap教程-PHP中文网

直接用 rounded 和 img-fluid 不行，因为 img-fluid 仅使宽度自适应、高度随动，不维持宽高比；rounded 作用于图片自身，原始比例非1:1时圆角会变形。正确方案是容器设 aspect-ratio: 1/1 + overflow-hidden + rounded，图片用 object-fit: cover 居中裁剪。

bootstrap如何让图片在col中实现1:1比例且带有圆角效果

为什么直接用 `rounded` 和 `img-fluid` 不行

因为 img-fluid 只控制宽度自适应、高度随动，不保证宽高比；rounded 作用于图片自身，但若图片原始比例不是1:1，圆角会出现在拉伸/压缩后的矩形上，视觉上仍是“歪的圆角”。真正要的是容器维持正方形 + 图片居中裁剪 + 圆角套在容器上。

用 `aspect-ratio: 1 / 1` 配合 `overflow: hidden`

现代浏览器（Chrome 103+、Firefox 110+、Safari 16.4+）支持 aspect-ratio，这是最干净的方案。关键点是：圆角加在容器上，图片用 object-fit: cover 居中裁剪。

<div class="col">
  <div class="rounded-3 overflow-hidden" style="aspect-ratio: 1 / 1;">
    @@##@@
  </div>
</div>

rounded-3 加在父容器（不是 <img src="photo.jpg" class="w-100 h-100 object-fit-cover">），确保圆角包裹整个正方形区域
overflow-hidden 必须加，否则裁剪失效
w-100 h-100 让图片撑满容器，object-fit-cover 保证等比缩放+居中裁剪
Bootstrap 5.3+ 才内置 object-fit-cover，旧版本需手动加 CSS：object-fit: cover;

兼容老浏览器：用 `padding-top: 100%` 伪元素方案

IE 和旧版 Safari 不支持 aspect-ratio，得用经典 padding hack。核心是把图片作为背景图或绝对定位子元素，靠父容器内边距撑出正方形。

Bootstrap

Bootstrap 5.3.8 编译版包含可直接用于项目的 CSS、JavaScript 和插件文件，适合快速搭建响应式网页。

下载

<div class="col">
  <div class="position-relative rounded-3 overflow-hidden" style="width: 100%;">
    <div style="padding-top: 100%; background-image: url('photo.jpg'); background-size: cover; background-position: center;"></div>
  </div>
</div>

外层 position-relative 提供定位上下文，rounded-3 和 overflow-hidden 仍加在外层
内层 div 用 padding-top: 100% 实现 1:1 宽高比，无内容时高度由 padding 决定
背景图方式避免了 <img> 的语义和加载问题，但无法设置 alt 文本
若必须用 <img> 标签，可改用绝对定位：position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;