Ruby on Rails中image_tag渲染图片过大，如何通过CSS恢复至原生HTML显示效果？

这种情况我碰到过好多次啦！主要是因为Rails的image_tag生成的<img>标签，要么没继承原生HTML里的默认样式限制，要么是被项目里的全局CSS或者你用到的框架（比如代码里的mb-8看起来像是Bootstrap的间距类）的默认规则给放大了。给你几个靠谱的解决办法：

1. 直接用框架自带的响应式类（如果你用Bootstrap） #

既然你用到了mb-8这类Bootstrap类，那直接用Bootstrap内置的img-fluid类就能快速解决——它会自动设置图片的max-width: 100%和height: auto，让图片自适应容器宽度，和原生HTML里的显示效果一致：

<figure class="mb-8">
  <%= image_tag "AdobeStock_162479912.jpeg", class: "img-fluid" %>
</figure>

2. 自定义CSS类（通用方案） #

如果不用Bootstrap，或者想更灵活控制样式，可以自己写一个CSS类，然后应用到图片上：

• 打开你的Rails项目里的样式文件，比如app/assets/stylesheets/application.scss（.css后缀也可以），添加以下样式：

.native-image-size {
  max-width: 100%; /* 限制图片最大宽度不超过容器 */
  height: auto; /* 保持图片宽高比，避免拉伸变形 */
  /* 如果你知道原生HTML里图片的具体宽度，也可以直接设置max-width: 800px;这类固定值 */
}

• 然后在image_tag里加上这个类：

<figure class="mb-8">
  <%= image_tag "AdobeStock_162479912.jpeg", class: "native-image-size" %>
</figure>

3. 给容器设置宽度限制 #

如果是因为容器没有宽度约束导致图片撑满整个页面，也可以直接给<figure>容器加样式：

figure.mb-8 {
  max-width: 900px; /* 替换成你原生HTML里容器的宽度 */
  margin: 0 auto; /* 可选：让容器居中显示 */
}
figure.mb-8 img {
  width: 100%;
  height: auto;
}

4. 排查全局样式干扰 #

如果上面的方法都没生效，建议用浏览器的开发者工具（按F12，选择Elements面板）选中图片元素，查看它的样式规则，看看是不是有全局的img样式被设置成了width: 100%或者更大的值，找到后修改对应的CSS规则即可。

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