Проблема с текучим дизайном CSS

#html #css #fluid-layout

#HTML #css #fluid-layout

Вопрос:

Я планирую макет на основе гибкого дизайна с 2 ссылками следующим образом;

введите описание изображения здесь

Ниже приведен HTML-код:

 <div id="container">
    <div class="fl wd5percent"><img src="titleText.jpg" /></div>
    <div class="fl wd95percent"></div>
</div>

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

Теперь моя проблема в том, что это гибкий макет, я нигде не могу использовать ширину «px»… Я определяю img для использования max-width:100% , но такой тип создает пустое пространство (или пробел) под изображением текста заголовка, когда высота 2-го столбца больше.

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

Опять же, я не могу нигде использовать ширину или высоту в моем CSS. Поэтому я не могу сказать, ширина: 200 пикселей; высота: 100 пикселей

Ответ №1:

Пожалуйста, посмотрите ссылку на скрипку ниже:

http://jsfiddle.net/thilakar/xKrws/2/

1. Спасибо большое … Но я не вижу эффекта на jsfiddle.. Кроме того, хотя я бы предпочел использовать текст для 1-го столбца, он поворачивается text..so не уверен, что это будет работать так, как ожидалось, даже с преобразованиями CSS..

2. Спасибо … Поскольку вы использовали текст для 1-го столбца … я не уверен, насколько хорошо он будет настроен, если вместо этого я использую изображение (повернутый текст)..

3. Да, правильно … теперь, когда вы использовали изображение… и если я уменьшу размер браузера, изображение будет обрезаться при меньших размерах… Я хочу, чтобы он масштабировался ниже / выше в соответствии с размерами браузера..

4. Я не думаю, что это можно сделать в css. вы можете попробовать эту ссылку: buildinternet.com/2009/07 /… —

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