Question

所以我使用Basecamp的Trix编辑器来实现Ruby on Rails项目。

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

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

任何方式我都可以阻止这样做吗？

Answer 1

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

Answer 2

也许您提供了代码，我可以给您确切的答案。但是您可以做的是使用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。

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

祝你好运。

更新：

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

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

删除或更改Trix Editor上载图像的宽度和高度属性

2 个答案: