Решено! "Изображение для вступительного текста материала" не форматируется

Тема в разделе "Ошибки при работе с Joomla", создана пользователем Chek2000, 08.12.2015.

  1. Chek2000
    Offline

    Chek2000 Недавно здесь

    Регистрация:
    08.12.2015
    Сообщения:
    4
    Симпатии:
    0
    Пол:
    Мужской
    При создании/редактировании материала во вкладке "Изображения и Ссылки" есть пункт "Изображение для вступительного текста материала", после добавления изображения оно появляется на главной странице, проблема заключается в том, что форматируется изображение под ширину колонки только в chrome, в остальных браузерах изображение появляется в полном размере и перекрывает другие колонки.
    Chrome: chrome.jpg
    Firefox: fox.jpg
    Что пробовал сделать:
    1. Менял версию php, на данный момент 5.6
    2. Менял Шаблоны
    3. Поставил joomla версию 3.5
    4. Испробывал около 5 браузеров (IE, Opera, Firefox...), корректное отображение только в UCbrowser на телефоне и Chrome
    Видимо проблема где-то в модуле отображения материала?
    Подскажите, в какую сторону рыть?
     
    Последнее редактирование: 08.12.2015
  2.  
  3. Лучший ответ:
    Сообщение #2 от 09.12.2015, автор OlegM
  4. OlegM
    Offline

    OlegM Russian Joomla! Team Команда форума

    Регистрация:
    12.04.2007
    Сообщения:
    4 310
    Симпатии:
    375
    Пол:
    Мужской
    Лучший ответ
    Какой ужас :)

    В сторону CSS - "адаптивные изображения", где

    Код (css):
    1. img {
    2.     max-width: 100%;    
    3.     height: auto;
    4. }
     
    Chek2000 нравится это.
  5. Chek2000
    Offline

    Chek2000 Недавно здесь

    Регистрация:
    08.12.2015
    Сообщения:
    4
    Симпатии:
    0
    Пол:
    Мужской
    Спасибо огромное, глянул исходники, оказалось за отображение картинки отвечает класс.
    Код (css):
    1. .pull-left.item-image

    было:
    Код (css):
    1. .pull-left.item-image {
    2.    margin: 0 20px 18px 0;
    3. }

    стало:
    Код (css):
    1. .pull-left.item-image {
    2.    max-width: 100%;
    3.    height: auto;
    4.    margin: 0 20px 18px 0;
    5. }


    Теперь с отображением все в порядке. margin, так понимаю трогать не стоит? Последний вопрос: в стилях остался класс
    Код (css):
    1. .pull-right.item-image
    стоит ли изменить его св-ва как и в первом примере, т.е ширину и высотоу добавить?
     
  6. OlegM
    Offline

    OlegM Russian Joomla! Team Команда форума

    Регистрация:
    12.04.2007
    Сообщения:
    4 310
    Симпатии:
    375
    Пол:
    Мужской
    Да.

    Можно было просто добавить то, что я написал - применилось бы сразу ко всем картинкам.
     
    Chek2000 нравится это.
  7. Chek2000
    Offline

    Chek2000 Недавно здесь

    Регистрация:
    08.12.2015
    Сообщения:
    4
    Симпатии:
    0
    Пол:
    Мужской
    Спасибо, пытался вписать в уже имеющиеся стили для img как вы советовали, но изменений не наблюдал, кстати говоря, у меня в файле css почему-то img описан аж 3 раза:

    Код (css):
    1. img {
    2.    max-width: 100%;
    3.    width: auto \9;
    4.    height: auto;
    5.    vertical-align: middle;
    6.    border: 0;
    7.    -ms-interpolation-mode: bicubic;
    8. }
    9. --------------------
    10. tr,
    11. img {
    12.      page-break-inside: avoid;
    13.    }
    14. --------------------
    15. img {
    16.      max-width: 100% !important;
    17.    }


    Это вообще нормально?

    Вообщем-то тему можно закрывать, проблема решена, спасибо еще раз.
     
    Последнее редактирование: 09.12.2015
  8. OlegM
    Offline

    OlegM Russian Joomla! Team Команда форума

    Регистрация:
    12.04.2007
    Сообщения:
    4 310
    Симпатии:
    375
    Пол:
    Мужской
    Значит что-то другое переопределяло
     
  9. Chek2000
    Offline

    Chek2000 Недавно здесь

    Регистрация:
    08.12.2015
    Сообщения:
    4
    Симпатии:
    0
    Пол:
    Мужской
    Я немного уменьшил код в css, вместо
    Код (css):
    1. img {
    2.    max-width: 100%;
    3.    width: auto \9;
    4.    height: auto;
    5.    vertical-align: middle;
    6.    border: 0;
    7.    -ms-interpolation-mode: bicubic;
    8. }
    9. --------------------
    10. tr,
    11. img {
    12.      page-break-inside: avoid;
    13.    }
    14. --------------------
    15. img {
    16.      max-width: 100% !important;
    17.    }


    сделал

    Код (css):
    1. img {
    2.    max-width: 100% !important;
    3.    width: auto \9;
    4.    height: auto;
    5.    vertical-align: middle;
    6.    border: 0;
    7.    -ms-interpolation-mode: bicubic;
    8. }
    9. --------------------
    10. tr,
    11. img {
    12.      page-break-inside: avoid;
    13.    }
    насколько я понимаю это ничего не изменит в отображении страницы? как закрыть тему?
     
  10. OlegM
    Offline

    OlegM Russian Joomla! Team Команда форума

    Регистрация:
    12.04.2007
    Сообщения:
    4 310
    Симпатии:
    375
    Пол:
    Мужской
    Не должно
     
    Chek2000 нравится это.

Поделиться этой страницей

Загрузка...