Bootstrap5中如何将featurette的SVG占位符替换为表现一致的img

• 第一处硬伤是类名拼写错误：你代码里写的是feaurette-image，比正确的类名featurette-image少了一个字母t，导致所有自定义样式规则根本无法匹配到这个img元素。
• 第二处是对原占位SVG的展示逻辑理解偏差：原SVG并不是靠固定尺寸实现展示效果，而是通过几个关键规则组合，实现「1:1正方形比例、最大宽度500px、宽度随父容器自适应、内容按比例裁切不拉伸」的固定表现，普通img标签如果没把这些规则一一对应补上，就一定会出现变形、溢出、排版错位的问题。

1. 修正类名拼写错误，把拼错的feaurette-image替换为正确的featurette-image
2. 给img补充和原SVG完全对齐的属性，逐一匹配原占位符的表现规则：
   • 补上和原SVG一致的固有属性：width="500" height="500"，这是浏览器计算元素初始尺寸、实现响应式缩放的基础
   • 补上object-fit: cover样式，这个属性完全对应原SVG里的preserveAspectRatio="xMidYMid slice"逻辑，不管你放的原图是什么比例，都会自动居中裁切多余部分，彻底避免挤压变形
3. 最终可直接使用的完整标签代码：

<img 
  src="替换为你的图片地址" 
  class="featurette-image img-fluid mx-auto"
  width="500"
  height="500"
  style="object-fit: cover;"
  alt="占位图片"
>

• 桌面端（视口宽度≥768px，md栅格生效）：图片最大展示宽度锁定为500px，在父容器内水平居中，和旁边7/12宽度的文字块形成标准featurette排版，和官方SVG占位符的视觉位置完全一致
• 移动端（视口宽度<768px）：图片宽度自动撑满父容器100%宽度，高度自动随宽度等比缩放为1:1正方形，和官方占位符的断点表现无差异
• 图片适配：不管替换的原图是横版、竖版、还是比例偏差较大的素材，都不会出现拉伸挤压，只会自动居中裁切多余的内容部分。

• 设置70vh视高的方案：完全脱离了原设计的正方形比例逻辑，在不同视口高度下会出现图片过宽/过窄的排版错位
• 固定CSS尺寸500px的方案：在移动端小视口下会直接溢出容器，破坏响应式布局
• 只套类不补属性的方案：img标签默认会保留自身原始宽高比，既不会形成1:1的正方形块，也会在填充容器时出现变形。

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