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


Пользователь месяца
OlgaGetman OlgaGetman 1-й за Декабрь
Очков активности: 2100 10 тем, 170 сообщений, 7 баллов репутации
ТОП самых активных за этот месяц
  • Фотография Ixman
    #1

    Ixman (o5cat.ru)
    Очков активности: 126 Вне конкурса за определение пользователя месяца

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

    BLIK
    Очков активности: 81 0 тем, 18 сообщений, 3 балла репутации

  • Фотография Андрей WPMasterKZ
    #3

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

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

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

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

    Mandarin
    Очков активности: 52.5 0 тем, 35 сообщений, 1 балл репутации

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

    Constantine
    Очков активности: 48 5 тем, 17 сообщений, 1 балл репутации

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

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

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

    magnet (rbfxdirect.com)
    Очков активности: 30 0 тем, 10 сообщений, 2 балла репутации

  • Фотография Алексей111
    #9

    Алексей111 (xvideo24.ru)
    Очков активности: 28.5 2 темы, 13 сообщений, 1 балл репутации

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

    Guitaristka
    Очков активности: 27 0 тем, 18 сообщений, 1 балл репутации

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


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

#1 Sosnovskij

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

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

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

 

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

 

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


 

 

  • 0

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



#2 ShowPrint

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

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

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

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


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


#3 Sosnovskij

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

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

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


  • 0

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



#4 ShowPrint

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

Отправлено 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
  • Администратор
  • 4858 сообщений
  • Репутация: 727

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

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


  • 0

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



#6 ShowPrint

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

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

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


#7 TimurR

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

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

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

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


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

  • 1


#8 Sosnovskij

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

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

@TimurR, поставил

width="100%" height="auto"

Сработало.

 

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


  • 1

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



robot

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


Похожие темы

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

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