2

そこで、Ruby on Rails プロジェクトに Basecamp の Trix エディターを使用しています。

私がやろうとしているのは、アップロード/添付された画像をその親の幅に合わせることです。

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囲んでいるクラスです。もちろん、HTML によって異なります。<a><img>class

ブラウザーで検査を使用して、関係を判別します。

幸運を。

アップデート：

より良い方法は、次のように画像をターゲットにすることです。

#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 クラスを調整できます。

もう 1 つの方法は、trix スタイルシート フォルダーをコピーし、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 に答える