如何设置网页图片样式与响应式特性，解决CSS不生效及无类实现圆角居中问题

问题根源 #

你CSS代码中导航栏部分的注释写法错误，导致包括图片样式在内的后续所有CSS规则都被浏览器识别为注释内容，没有实际生效，这就是图片样式不生效的根本原因。
原本的错误注释是/* navbar/*，你把注释结尾的*/写反成了/*，导致注释没有正常闭合，后面的代码全部失效。

解决方法 #

不需要给图片加类，只要做两处修改即可实现你要的效果：

1. 修正注释的错误写法
2. 给现有img选择器的CSS规则加一行margin: 0 auto实现居中，你原本写的圆角、响应式属性本身是正确的，之前只是被错误注释覆盖没生效。

修正后的对应代码片段

/* 修正后的注释部分 */
/* navbar */
/* top navigation bar style */
nav {
  background-color: #000;
  overflow: hidden;
  display: block;
  height: auto;
  width: auto;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

/* 修改后的图片样式 */
img {
  display: block;
  border-radius: 20px;
  max-width: 100%;
  height: auto;
  /* 新增这行实现居中，不需要额外加类 */
  margin: 0 auto;
}

修改完成后全站所有图片都会自动应用圆角、响应式适配、居中对齐的效果，完全符合你的要求。

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