如何使用CSS将图片Logo设置为圆角？

先看你的代码，问题根源在于图片比例处理和圆角设置的匹配度，还有可能的文件拼写问题，以下是具体修复方案：

核心问题分析 #

1. 你用的示例图是100x70的长方形，仅给border-radius:35px没法让它呈现明显圆角（更别说圆形），强制改1:1比例又会拉伸图片导致画质下降
2. 检查下CSS文件名：你HTML里引用的是stye.css，确认本地文件确实是这个拼写，别写成style.css，否则样式根本不会加载

方案一：实现圆形头像（保持画质） #

给图片加个1:1的容器，用容器做圆角，图片自适应容器且不拉伸：

.navbar {
  display: flex;
}

.nav-list {
  width: 50%;
  display: flex;
  align-items: center;
}

.logo {
  width: 45px;
  height: 45px;
  border-radius: 50%; /* 容器设为圆形 */
  border: 2px solid white;
  overflow: hidden; /* 隐藏图片超出容器的部分 */
  margin: 3px 5px;
}

.logo img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片自适应容器，保留比例不拉伸 */
}

方案二：仅添加圆角（不改变图片比例） #

如果不需要圆形，只要圆角，调整border-radius值并保证图片不拉伸：

.navbar {
  display: flex;
}

.nav-list {
  width: 50%;
  display: flex;
  align-items: center;
}

.logo img {
  height: 41px;
  margin: 3px 5px;
  border-radius: 10px; /* 按需调整圆角大小 */
  border: 2px solid white;
  width: auto; /* 宽度自适应高度，保留原比例 */
  object-fit: cover; /* 防止图片拉伸变形 */
}

为什么之前的操作无效？ #

• 长方形图片的border-radius要达到明显圆角，值至少要大于等于短边的一半；如果要圆形，必须让容器或图片是1:1比例，直接改图片宽高会破坏比例导致模糊
• 设置width:23%会随父元素宽度变化打乱图片比例，同样会引发拉伸问题

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