删除或更改 Trix 编辑器上传图像的宽度和高度属性答案

【问题标题】：Remove or change width and height attribute for Trix Editor uploaded images删除或更改 Trix 编辑器上传图像的宽度和高度属性
【发布时间】：2018-03-14 10:48:36
【问题描述】：

所以我在一个 Ruby on Rails 项目中使用 Basecamp 的 Trix 编辑器。

我要做的是使上传/附加的图像适合其父级的宽度。

Trix 自动将图像的高度和宽度嵌入元素本身。

有什么办法可以阻止 trix 这样做？

【问题讨论】：

标签： ruby-on-rails trix

【解决方案1】：

也许如果你提供了代码，我可以给你一个准确的答案。但是您可以做的是使用 CSS 定位元素，然后设置渲染尺寸：

.col-sm-10 a {
  text-align: center;
  img {
    width: 600px;
    height: 400px;
    display: block; #ensures the caption renders on the next line     
    }

其中.col-sm-10 是包含<a> 标签的类，该标签又包含<img> 标签。当然，class 会根据您的 HTML 有所不同。

在您的浏览器上使用 inspect 来确定关系。

祝你好运。

更新：

更好的方法是像这样定位图像：

#post-show-body a {
  text-align: center;
  img {
    max-width: 100%;
    height: auto;
    max-height: 100%;
  }
}

【讨论】：

【解决方案2】：

要调整附加图像的高度和宽度，您只需将 trix-content 类添加到您的 trix-editor 标签。然后确保也将类包含到结果 div 中。从那里您可以像往常一样从您的应用程序样式表中调整 trix-content 类。

另一种方法是复制 trix stylesheets 文件夹并在 content.scss 中使用 .attachment 和 img 标签

以下是我的样子：

img {
  max-width: 500px;
  height: auto;
}

.attachment {
   display: inline-block;
   position: relative;
   max-width: 50%;
   margin: 0;
   padding: 0;
}

阅读样式化格式化内容 https://github.com/basecamp/trix

【讨论】：