1 Востаннє редагувалося Betterthanyou (07.10.2017 21:11:07)

Тема: [Вирішено]responsive design і проблеми з зображенням

Вже вирішено. Поки писав, здогадався як вирішити проблему, можливо комусь потрібно буде.

TinyMCE дозволяє додавати зображення до сторінки, якщо їх вирівняти по лівому/правому краю в HTML це виглядає приблизно так
тег <p>текст текст текст... тег <img> текст текст текст...</p> (тобто img знаходиться в середині тегу p)
на комп'ютері і планшеті така сторінка виглядає доволі добре, текст обтікає картинку, картинка не заважає читачу.
На на мобільних телефонах з екраном до 350px (я не дуже розумію ще це за пікселі, але це точно не роздільна здатність дисплея, приміром айфон 6 плюс має 414х736 пікселів. Хто знає, поясніть) картинка заважає, тому що переносить кожне слово на новий рядок. Я хочу зробити так, що текст був зверху та знизу картинки, але не обтікав її, як таке зробити ?
Вирішення
CSS

img{
  display:block;
  margin:auto;
  height: auto;
  max-width: 100%;
}

https://jsfiddle.net/53umf8x3/

Подякували: 0xDADA11C7, 221VOLT2