Удалить или изменить атрибуты ширины и высоты для загруженных изображений Trix Editor

Question

Поэтому я использую редактор Trix Basecamp для проекта Ruby on Rails.

Я пытаюсь сделать так, чтобы загруженное / прикрепленное изображение соответствовало ширине его родителя.

Trix автоматически встраивает высоту и ширину изображения в сам элемент.

В любом случае я могу помешать Трикс сделать это?

Answer 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%;
  }
}

Answer 2

Чтобы изменить высоту и ширину прикрепленного изображения, вы можете просто добавить класс trix-content в свой тег trix-editor. И затем обязательно включите класс в результат div. Оттуда вы можете настроить класс trix-content из таблицы стилей приложения, как обычно.

Другой способ - скопировать папку с таблицами стилей trix и поиграться с.attachment и тегом img из файла content.scss.

Вот как выглядит мой:

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 3

В вашей\app\assets\stylesheets\actiontext.cssвы можете определить свойства изображения.

Мой выглядит так.

      .trix-content img {
  max-width: 70%;
  height: 450px;
}