2

因此，我将 Basecamp 的 Trix 编辑器用于 Ruby on Rails 项目。

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

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

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

4

2 回答 2

1

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

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

where.col-sm-10是包含<a>标签的类，而标签又包含<img>标签。当然，这class将根据您的 HTML 不同而有所不同。

在浏览器上使用检查来确定关系。

祝你好运。

更新：

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

#post-show-body a {
  text-align: center;
  img {
    max-width: 100%;
    height: auto;
    max-height: 100%;
  }
}
于 2018-06-23T21:55:55.217 回答
0

要调整附加图像的高度和宽度，您只需将 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

于 2018-04-28T17:53:08.083 回答