Как уменьшить масштаб div в другом div с помощью CSS?

Question

Я пытаюсь масштабировать div (divB), который находится внутри другого div (divA). Проблема в том, что высота divA определяется его содержимым. Когда divB уменьшается, высота divA не изменяется ... Это происходит, когда применяется преобразование, потому что оно фактически не изменяет количество пикселей, оно меняет размер самих пикселей (по крайней мере, я довольно конечно, это то, что происходит). Таким образом, легкое исправление заключается в том, чтобы вручную установить высоту divA как размер divB, умноженный на коэффициент масштабирования.

Однако, если я это сделаю, мне нужно каждый раз обновлять высоту каждый раз при изменении содержимого divA. В моем случае это очень громоздко, так как будет тонна изменений в содержании divA. Поэтому мне интересно, есть ли более простой способ сделать это, предпочтительно используя CSS.

Вот простой JSFiddle продемонстрировать проблему: http://jsfiddle.net/turtlewaxer1100/82cux/8/

Просто добавить некоторые элементы, масштабирование вниз, и вы увидите, что я имею в виду высота не подстраиваясь. Если нажать «Fix Height», то он будет регулировать высоту правильно, но если добавить больше элементов высота не регулируется, если не исправить это снова ...

HTML

<div> 
    <div class="wrapper"> 
     <div id="scalar"></div> 
    </div> 
    <div class="buttons"> 
     <div id="button"> 
      <input type="button" value="Add" /> 
     </div> 
     <div id="scaleDown"> 
      <input type="button" value="Scale Down" /> 
     </div> 
     <div id="scaleUp"> 
      <input type="button" value="Scale Up" /> 
     </div> 
     <div id="fixHeight"> 
      <input type="button" value="Fix Height" /> 
     </div> 
    </div> 
</div> 

CSS

.wrapper { 
    float:right; 
    width: 200px; 
    background-color: black; 
} 
.section { 
    margin-left:75px; 
    height: 50px; 
    width: 50px; 
    background-color: red; 
} 
.buttons { 
    float:left; 
} 
.scaleDown { 
    -webkit-transform: scale(0.75); 
    -moz-transform: scale(0.75); 
    -ms-transform: scale(0.75); 
    transform: scale(0.75); 
    -webkit-transform-origin: 50% 0 0; 
    -moz-transform-origin: 50% 0 0; 
    -ms-transform-origin: 50% 0 0; 
    transform-origin: 50% 0 0; 
} 

JQuery

var section = $("<div class='section'></div>") 

$(document).ready(function() { 
    $("#button").children().click(function() { 
     $("#scalar").append(section.clone(false)); 
    }); 

    $("#scaleDown").children().click(function() { 
     $("#scalar").addClass("scaleDown"); 
    }); 

    $("#scaleUp").children().click(function() { 
     $("#scalar").removeClass("scaleDown"); 
    }); 

    $("#fixHeight").children().click(function() { 
     $(".wrapper").height($("#scalar").height()*.75) 
    }); 
}); 

Answer 1

Так что я не смог найти ответ, используя только CSS, но я нашел довольно простое решение для JavaScript. Существует событие DOM под названием «DOMSubtreeModified», которое будет срабатывать при каждом изменении любого элемента в иерархии текущего элемента. Итак, что я сделал, это проверить, отличается ли высота элемента от предыдущей высоты каждый раз, когда это событие запущено. Если он отличается, тогда установите его соответствующим образом. Таким образом, вы можете поймать все динамические изменения высоты без какого-либо учета того, что конкретно изменило высоту.

Вот скрипку, чтобы продемонстрировать идею: http://jsfiddle.net/turtlewaxer1100/E6D2H/5/

HTML

<div class="wrapper"> 
    <div id="scalar"></div> 
</div> 
<div class="buttons"> 
    <div id="button"> 
     <input type="button" value="Add" /> 
    </div> 
</div> 

CSS

.wrapper { 
    float:right; 
    width: 200px; 
    background-color: black; 
} 
.section { 
    margin-left:75px; 
    height: 50px; 
    width: 50px; 
    background-color: red; 
} 
.buttons { 
    float:left; 
} 
#scalar 
{ 
    -webkit-transform: scale(0.75); 
    -moz-transform: scale(0.75); 
    -ms-transform: scale(0.75); 
    transform: scale(0.75); 
    -webkit-transform-origin: 50% 0 0; 
    -moz-transform-origin: 50% 0 0; 
    -ms-transform-origin: 50% 0 0; 
    transform-origin: 50% 0 0; 
} 

JS

var section = $("<div class='section'></div>") 
var scaleFactor = 0.75; 
var originalHeight = 0; 

$(document).ready(function() { 
    $("#button").children().click(function() { 
     $("#scalar").append(section.clone(false)); 
    }); 

    $(".wrapper").bind('DOMSubtreeModified', function() { 
     var height, heightOffset; 

     height = $("#scalar").height(); 
     if (height && originalHeight !== height) { 
      heightOffset = height * scaleFactor; 
      $(this).height(heightOffset); 
      return originalHeight = height; 
     } 
    }); 
});