Масштаб div с его содержимым для установки окна

Question

У меня есть фиксированный размер <div> с некоторым сложным контентом (включая текстовые и фоновые изображения). Этот <div> имеет размер жесткого кода в пикселях (и его содержимое зависит от этого размера, а позиции контента также жестко закодированы в пикселях).

Вот очень упрощенный пример: http://jsfiddle.net/dg3kj/.

Мне нужно масштабировать этот div и содержимое внутри него, сохраняя его соотношение сторон, чтобы оно соответствовало окну.

Рекомендуемое решение, которое не требует от меня изменения вручную <div> (оно генерируется динамически и представляет собой кучу очень грязного устаревшего кода, который я хотел бы избежать касания). Решения JavaScript (jQuery) в порядке (в том числе и те, которые меняют сгенерированный контент - если это делается после факта генерации).

Я попытался сыграть с transform: scale(), но это не принесло удовлетворительных результатов. См. Здесь: http://jsfiddle.net/sJkLn/1/. (Я ожидаю, что красный фон будет не видно - то есть внешний <div> размер не должен быть растянут по оригинальных размеров масштабируется вниз <div>.)

Любые подсказки?

Answer 1

Я не совсем уверен, соответствует ли это вашим потребностям, но, возможно, это вызовет некоторые другие идеи, если нет.

Здесь я использую transition: scale() для управления размером div, который должен быть пропорционально масштабирован. transform-origin установлено в top left, чтобы держать div в верхнем левом углу.

Когда div требует масштабирования, его размер div также имеет размер. Это должно позволить правильному потоку содержимого другого контента на странице, поскольку размер браузера изменяется. Если оберточный div не существует, вы можете добавить один динамически, используя $.wrap(), хотя он может получить «интересный», выясняя, какие стили переносятся, чтобы поддерживать общий макет, плавно.

Demo FiddleDemo with content

CSS:

#wrap { 
    position: relative; 
    width: 640px; 
    height: 480px; 
    background-color: red; 
} 
#outer { 
    position: relative; 
    width: 640px; 
    height: 480px; 
    background: url('http://placekitten.com/640/480') no-repeat center center; 
    -webkit-transform-origin: top left; 
} 

Код:

var maxWidth = $('#outer').width(); 
var maxHeight = $('#outer').height(); 

$(window).resize(function(evt) { 
    var $window = $(window); 
    var width = $window.width(); 
    var height = $window.height(); 
    var scale; 

    // early exit 
    if(width >= maxWidth && height >= maxHeight) { 
     $('#outer').css({'-webkit-transform': ''}); 
     $('#wrap').css({ width: '', height: '' }); 
     return; 
    } 

    scale = Math.min(width/maxWidth, height/maxHeight); 

    $('#outer').css({'-webkit-transform': 'scale(' + scale + ')'}); 
    $('#wrap').css({ width: maxWidth * scale, height: maxHeight * scale }); 
}); 

Answer 2

Пока вы определяете размеры содержимого% на основе, вы, безусловно, сможете динамически изменять их размеры на основе внешнего div. Тогда просто использовать JQuery:

jQuery(document).ready(function ($) { 
    var newWidth = '300px'; 
    $('.your-div').css('width', newWidth); 
}); 

Answer 3

Если вам нужно установить это динамически на основе окна, вы можете установить в DIV в процентах от доступного окна реального имущества тоже.

jQuery(document).ready(function ($) { 
     var percentChange = .66; 
     var newWidth = $(window).width() * percentChange; 
     $('#primary').css('width', newWidth + 'px'); 
    });