修改图片尺寸后如何添加圆形边框而非椭圆形边框？

你遇到的问题本质是元素宽高不相等，border-radius: 50%会根据宽和高的一半分别计算圆角半径，自然就变成椭圆。要得到正圆形边框，核心是先让图片（或其容器）成为正方形，再配合圆角和图片比例处理。

给你两种实用的解决方案，结合你的代码来改：

方案一：直接给图片设置正方形尺寸 + 比例裁剪 #

不需要修改HTML，直接在CSS里给图片设置正方形宽高，用object-fit: cover保证图片不变形且填满区域：

#activites img {
  /* 设置正方形尺寸，可根据需求调整 */
  width: 200px;
  height: 200px;
  /* 正圆圆角 */
  border-radius: 50%;
  /* 保持图片比例，裁剪超出部分，避免拉伸变形 */
  object-fit: cover;
  /* 可选：添加你需要的边框样式 */
  border: 4px solid #2c3e50;
}

方案二：用容器包裹图片（更灵活，适合需要额外样式的场景） #

先修改HTML，给每个图片套一个容器：

<div id="activites">
  <div class="circle-img-wrapper">
    <img id="kayaking" src="images/kayaking.jpg">
  </div>
  <div class="circle-img-wrapper">
    <img id="swim" src="images/swim-with-manatee.jpg">
  </div>
  <div class="circle-img-wrapper">
    <img id="hike" src="images/hiking.jpg">
  </div>
</div>

然后添加CSS：

.circle-img-wrapper {
  /* 正方形容器 */
  width: 200px;
  height: 200px;
  /* 正圆圆角 */
  border-radius: 50%;
  /* 裁剪超出容器的图片部分 */
  overflow: hidden;
  /* 可选：边框样式 */
  border: 4px solid #2c3e50;
}

.circle-img-wrapper img {
  width: 100%;
  height: 100%;
  /* 保持图片比例，填满容器 */
  object-fit: cover;
}

补充说明 #

• 如果不想裁剪图片，想要完整显示（会在圆形内留空白），可以把object-fit: cover换成object-fit: contain，同时给容器设置背景色填充空白区域。
• 两种方案都能保证边框是正圆，区别在于方案一更简洁，方案二更适合需要给圆形区域加阴影、hover效果等额外样式的场景。

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