求助：Bootstrap卡片（slick.js轮播）内SVG尺寸无法按设置缩小

我来帮你排查这个SVG显示尺寸超出预期的问题，结合Bootstrap和slick.js的特性，大概率是CSS样式的默认规则覆盖了SVG自身的尺寸设置，咱们一步步解决：

问题根源分析 #

你提到SVG已经设置了width="15"、height="17"和viewBox="0 0 32 32"，但实际显示过大，主要有两个核心原因：

• Bootstrap的card-img类默认样式：这个类自带width: 100%; height: auto;的规则，会强制SVG填满卡片容器的宽度，完全忽略SVG自身的width/height属性。
• Slick.js轮播的容器缩放：轮播的滑块（.slick-slide）可能被设置了固定或自适应的宽度，导致卡片被拉伸，进而SVG跟着放大。

具体解决方案 #

方案1：覆盖card-img的CSS样式 #

直接给SVG的card-img类设置固定尺寸，或者限制最大宽度，同时保持SVG的比例：

/* 用更具体的选择器提高优先级，避免被Bootstrap默认样式覆盖 */
.card .card-body .card-img {
  width: 15px; /* 和你SVG代码里的width值一致 */
  height: 17px; /* 和你SVG代码里的height值一致 */
  object-fit: contain; /* 确保SVG保持原有比例，不会变形 */
}

如果担心优先级不够，可以临时用!important（优先用更具体的选择器，不推荐长期依赖!important）：

.card-img {
  width: 15px !important;
  height: 17px !important;
  object-fit: contain;
}

方案2：优化SVG自身属性 #

在SVG标签里添加preserveAspectRatio属性，确保缩放时严格遵循你设置的尺寸比例：

<svg width="15" height="17" viewBox="0 0 32 32" preserveAspectRatio="xMidYMid meet">
  <!-- 你的SVG内容 -->
</svg>

这个属性会让SVG在容器内按比例缩放，不会被强制拉伸变形。

方案3：调整Slick.js轮播的滑块宽度 #

如果轮播滑块被强制设置了过大的宽度，也会导致卡片和SVG被拉伸，可以给滑块设置自适应宽度：

.slick-slide {
  width: auto !important; /* 让滑块根据内容自动调整宽度 */
}

或者根据你的布局需求设置固定宽度，避免卡片被过度拉伸：

.slick-slide {
  width: 200px !important; /* 按需调整数值 */
}

你的原HTML代码参考 #

<div class="card">
  <div class="card-body">
    <img class="card-img" src="img/c_logo.svg">
    <h5 class="card-title">C</h5>
    <h6 class="card-subtitle mb-2 text-muted">Programming ...</h6>
  </div>
</div>

先试试方案1，这是最直接解决Bootstrap样式冲突的办法，应该能快速让SVG回到你预期的尺寸~

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