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

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

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

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

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

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

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

Ответы

Ответ 1

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

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

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

Демо-скрипт Демо с контентом

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 });
});

Ответ 2

Я взял ответ из dc5 и поместил его в небольшую функцию, которая позволяет вам устанавливать масштаб в зависимости от окна.

function scaleBasedOnWindow(elm, scale=1, fit=false){
    if(!fit){
        elm.style.transform='scale('+scale/Math.min(elm.clientWidth/window.innerWidth,elm.clientHeight/window.innerHeight)+')';
    }else{
        elm.style.transform='scale('+scale/Math.max(elm.clientWidth/window.innerWidth,elm.clientHeight/window.innerHeight)+')';
    }
}

если вы хотите, чтобы элемент соответствовал, а не обрезался, просто измените Math.min на Math.max или просто установите для параметра fit этой функции значение true.

Минимизированная версия:

function scaleBasedOnWindow(elm,scale=1,fit){if(!fit){elm.style.transform='scale('+scale/Math.min(elm.clientWidth/window.innerWidth,elm.clientHeight/window.innerHeight)+')';}else{elm.style.transform='scale('+scale/Math.max(elm.clientWidth/window.innerWidth,elm.clientHeight/window.innerHeight)+')';}}

Ответ 3

Если вам нужно установить это динамически на основе окна, вы также можете установить div в процентную долю от доступной оконной недвижимости.

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

Ответ 4

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

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