Расширенный CSS Layout | Фиксированная колонка с очень большой картинкой - PullRequest
0 голосов
/ 23 апреля 2011

ОК, так что мой мозг просто не работает сегодня вечером. То, что я пытаюсь сделать, это двухколоночный макет, где один столбец прокручивается, а другой фиксируется. Фиксированный столбец содержит очень большое фоновое изображение, которое я бы хотел масштабировать до размеров экрана. Кроме того, ширина левого (фиксированного) столбца должна масштабироваться для размещения фонового изображения. Лучший способ действительно объяснить это с помощью картинки: Layout Выделенная область со стрелкой внутри будет прокручиваться, а другой столбец с изображением и статусом Twitter останется фиксированным. Моя проблема не вступает в игру с фиксированным позиционированием CSS. Моя проблема заключается в том, чтобы масштабировать мои столбцы в зависимости от размера экрана, чтобы изображение всегда оставалось в пропорциях, показанных здесь, как в его собственных размерах, так и в других столбцах. Это то, на чем я застрял. Есть идеи? Я действительно ценю помощь.

Ответы [ 2 ]

0 голосов
/ 23 апреля 2011

Проверьте код JS FIDDLE ЗДЕСЬ: http://jsfiddle.net/4P9fJ/7/

Поскольку вы не упоминаете, что будете менять изображения на своем фоне, я предоставил фоновое изображение в теге body.

0 голосов
/ 23 апреля 2011

Я думаю, вы можете просто использовать элемент изображения в вашем первом столбце и установить его на 100% от его родительского элемента.Если родительский div тоже в процентах, его размер будет меняться, что также увеличивает масштаб изображения.Если мы хотим, чтобы изображение масштабировалось, мы также не можем указать высоту.

<div id="parent" style="width: 40%">
  <img id="child" style="width: 100%" src="http://i.stack.imgur.com/lvvrv.png" alt="Fake Background" />
</div>
...