Текст рядом с картинкой на сайте с отзывчивым дизайном

Тема в разделе "Верстка", создана пользователем Freeman Liberty, 26 мар 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. Freeman Liberty

    Freeman Liberty

    Регистр.:
    19 май 2009
    Сообщения:
    457
    Симпатии:
    171
    На сайте с отзывчивым дизайном рядом с картинкой расположен текст.
    Пока сайт открыт в полный размер - все нормально, но стоит начать уменьшать размер окна - текст вытягивается в длинный столбец, значительно превышающий высоту картинки.
    Какие варианты решения данной проблемы можете посоветовать?
    Полный экран
    pic1.jpg
    Уменьшенная ширина:
    pic2.jpg
     
  2. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.126
    Симпатии:
    668
    1) масштабировать вместе с текстом и картинку
    2) перемещать блок с текстом под картинку, чтобы он был на всю ширину экрана. Ну и заодно ширину картинки масштабировать в соответствии с шириной экрана.
     
  3. iskif

    iskif

    Регистр.:
    21 авг 2006
    Сообщения:
    325
    Симпатии:
    35
    если речь именно о минимальной высоте, то, как вариант (теория, не на чем так вот по быстрому проверить :) )
    Код:
     CSS:
    height: auto!important; min-height: 200px; height: 200px;
    height: auto!important; height: 200px; - это для IE 6.
    если нужна именно фиксированная высота, независимо от того, сколько контента в блоке, то:
    Код:
    height: 200px; overflow-y: auto;
    overflow-y: auto; - появится полоса прокрутки в блоке, если контент не поместится. чтобы скрыть "лишний" контент вместо overflow-y: auto поставить overflow: hidden;
     
  4. Freeman Liberty

    Freeman Liberty

    Регистр.:
    19 май 2009
    Сообщения:
    457
    Симпатии:
    171
    Картинка маштабируется т.е. размер картинки уменьшается, а текста вот нет.
    Блок с текстом перемещается под картинку при достижении ширины сайта в 500 px, но до этого успевает так исказиться.
     
  5. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.126
    Симпатии:
    668
    ну я и имел ввиду масштабирование блока, а не кегль текста. Посмотрел на второй скрин, вроде все нормально. Здесь уже ничего не поделаешь, разве что количество текста сокращать )
     
  6. MadChild

    MadChild Постоялец

    Регистр.:
    23 янв 2013
    Сообщения:
    72
    Симпатии:
    5
    У блока с картинкой стоит фиксированная ширина в px, ставим в процентах
    Картинке пишем
    img{
    max-width: 100%;
    }
    и все ок будет
     
  7. alffcpu

    alffcpu Создатель

    Регистр.:
    23 окт 2013
    Сообщения:
    22
    Симпатии:
    56
    1. Уменьшать размер картинки и текста вместе. Те выставить размер контейнера в зависимости от размера страницы. и Размер изображения в зависимости от размера страницы.
    2. Если становится совсем некрасиво при низком разрешении, то перенести блок с текстом под картинку. Вообще можно посмотреть как работают сетки в респонсив дизайнах хоть у того же бутстрапа.
    Мне кажется сложно будет добиться одинакового размера и картинки и текста.
    3. Уменьшать размер текста font-size с помощью @media (min-width: NNpx) and (max-width: NNpx)