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

[Freeman Liberty]

На сайте с отзывчивым дизайном рядом с картинкой расположен текст.
Пока сайт открыт в полный размер - все нормально, но стоит начать уменьшать размер окна - текст вытягивается в длинный столбец, значительно превышающий высоту картинки.
Какие варианты решения данной проблемы можете посоветовать?
Полный экран

Уменьшенная ширина:

 

[mdss]

1) масштабировать вместе с текстом и картинку
2) перемещать блок с текстом под картинку, чтобы он был на всю ширину экрана. Ну и заодно ширину картинки масштабировать в соответствии с шириной экрана.

 

[iskif]

если речь именно о минимальной высоте, то, как вариант (теория, не на чем так вот по быстрому проверить )

 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;

 

[Freeman Liberty]

1) масштабировать вместе с текстом и картинку
2) перемещать блок с текстом под картинку, чтобы он был на всю ширину экрана. Ну и заодно ширину картинки масштабировать в соответствии с шириной экрана.

Картинка маштабируется т.е. размер картинки уменьшается, а текста вот нет.
Блок с текстом перемещается под картинку при достижении ширины сайта в 500 px, но до этого успевает так исказиться.

 

[mdss]

Картинка маштабируется т.е. размер картинки уменьшается, а текста вот нет.
Блок с текстом перемещается под картинку при достижении ширины сайта в 500 px, но до этого успевает так исказиться.

ну я и имел ввиду масштабирование блока, а не кегль текста. Посмотрел на второй скрин, вроде все нормально. Здесь уже ничего не поделаешь, разве что количество текста сокращать )

 

[MadChild]

У блока с картинкой стоит фиксированная ширина в px, ставим в процентах
Картинке пишем
img{
max-width: 100%;
}
и все ок будет

 

[alffcpu]

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