Перейти к содержимому


Пользователь месяца
BLIK BLIK 1-й за Февраль
Очков активности: 1228 0 тем, 63 сообщения, 13 баллов репутации
ТОП самых активных за этот месяц
  • Фотография Андрей WPMasterKZ
    #1

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 1728 Вне конкурса за определение пользователя месяца

  • Фотография ShowPrint
    #2

    ShowPrint (ShowPrint.ru)
    Очков активности: 957 1 тема, 55 сообщений, 11 баллов репутации

  • Фотография magnet
    #3

    magnet (rbfxdirect.com)
    Очков активности: 462 Вне конкурса за определение пользователя месяца

  • Фотография Megoydagi
    #4

    Megoydagi
    Очков активности: 337.5 8 тем, 51 сообщение, 3 балла репутации

  • Фотография maxnik
    #5

    maxnik (konovalovpavel.ru)
    Очков активности: 306 2 темы, 62 сообщения, 3 балла репутации

  • Фотография pozitron123
    #6

    pozitron123
    Очков активности: 202.5 5 тем, 30 сообщений, 3 балла репутации

  • Фотография BLIK
    #7

    BLIK
    Очков активности: 142.5 Вне конкурса за определение пользователя месяца

  • Фотография WGN
    #8

    WGN (worldgamenews.com)
    Очков активности: 123 0 тем, 41 сообщение, 2 балла репутации

  • Фотография OlgaGetman
    #9

    OlgaGetman
    Очков активности: 120 Вне конкурса за определение пользователя месяца

  • Фотография ediksing
    #10

    ediksing (online-zarabotai.ru)
    Очков активности: 57 2 темы, 32 сообщения, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 26.02.2019
  • Яндекс выдача: 23.03.2019
Топ 5 участников по репутации


Как сделать адаптивное изображение, подключаемое в файлах шаблона?

#1 Sosnovskij

Sosnovskij
  • Администратор
  • 4979 сообщений
  • Репутация: 749
0

Отправлено 18 September 2017 - 13:02

Привет! Имеется адаптивный шаблон на Wordpress (но в принципе не суть). Все изображения, которые публикуются в контенте постов адаптируются под размеры экранов.

 

Сейчас вставил широкое изображение в шапку просто в файл header.php. На десктопе все хорошо, а на мобильных устройствах оно показывается не полностью, но горизонтальной прокрутки нет.

 

Как решить проблему, чтобы на мобильных устройствах картинка показывалась корректно? С помощью тега picture?


 

 

  • 0

Оставить отзыв о форуме:excl: Требуется ЛинкБилдер (создание ссылочной массы, 1200-1600 руб в сутки). Блог — https://sosnovskij.ru/.



#2 ShowPrint

ShowPrint
  • Пользователь PRO
  • 3277 сообщений
  • Репутация: 907

Отправлено 18 September 2017 - 15:52

@Sosnovskij, сайт в сети или на локалке?

Если в сети, то пришли ссыль в ЛС - гляну может быть стилями можно поправить...


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#3 Sosnovskij

Sosnovskij
    Topic Starter
  • Администратор
  • 4979 сообщений
  • Репутация: 749

Отправлено 18 September 2017 - 15:59

@ShowPrint, в сети пока нет :) А стилями в style.css? Это изображение-баннер. То есть в будущем могут быть разные.


  • 0

Оставить отзыв о форуме:excl: Требуется ЛинкБилдер (создание ссылочной массы, 1200-1600 руб в сутки). Блог — https://sosnovskij.ru/.



#4 ShowPrint

ShowPrint
  • Пользователь PRO
  • 3277 сообщений
  • Репутация: 907

Отправлено 18 September 2017 - 16:17

@Sosnovskij, да - в style.css

 

Я пока не столь великий спец чтоб ванговать и давать рекомендации вслепую, а с cms и шаблонами совсем не знаком  :wacko:

 

По идее это должно "лечиться"  стилями, применяемыми к изображениям. Первое на что посмотрел бы и с чем "поигрался" - со свойствами: width, max-width, min-width

Естественно в той части css которая отвечает условиям @media screen and (max-width:???px)


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#5 Sosnovskij

Sosnovskij
    Topic Starter
  • Администратор
  • 4979 сообщений
  • Репутация: 749

Отправлено 19 September 2017 - 15:51

@ShowPrint, там для изображений в посте на автомате создаются отдельные мини-изображения для мобильных экранов.


  • 0

Оставить отзыв о форуме:excl: Требуется ЛинкБилдер (создание ссылочной массы, 1200-1600 руб в сутки). Блог — https://sosnovskij.ru/.



#6 ShowPrint

ShowPrint
  • Пользователь PRO
  • 3277 сообщений
  • Репутация: 907

Отправлено 19 September 2017 - 15:56

на автомате создаются отдельные мини-изображения для мобильных экранов
То что они создаются - хорошо, но как они выглядят на тех самых мобильных экранах зависит от стилей с которыми они выводятся (если "созданное" отличается от "показанного")  :)
  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#7 TimurR

TimurR
  • Пользователь PRO
  • 1047 сообщений
  • Репутация: 258

Отправлено 19 September 2017 - 23:45

image {
width: 100%;
height: auto;
}

Ширина изображения будет браться относительно ширины контейнера, в котором оно находится. 


Сообщение отредактировал TimurR: 19 September 2017 - 23:46

  • 1

#8 Sosnovskij

Sosnovskij
    Topic Starter
  • Администратор
  • 4979 сообщений
  • Репутация: 749

Отправлено 20 September 2017 - 14:09

@TimurR, поставил

width="100%" height="auto"

Сработало.

 

Всем спасибо :)


  • 1

Оставить отзыв о форуме:excl: Требуется ЛинкБилдер (создание ссылочной массы, 1200-1600 руб в сутки). Блог — https://sosnovskij.ru/.



robot

robot
  • Пользователь PRO
  • 2652 сообщений
  • Репутация: 85


Похожие темы

  Название темы Автор Статистика Последнее сообщение

Оформление форума – IPBSkins.ru