Выравнивание div с помощью CSS

Question

У меня есть DIV, который покрывает всю страницу (высота и ширина 100%). Я пытаюсь использовать CSS (и, возможно, JavaScript) для создания эффекта уменьшения масштаба, поэтому DIV меньше (что делает все внутри div - его детей - меньше) до определенной точки на странице (в середине страницы) и к конкретным width и height (скажем, 100 * 100 пикселей, например).

Я начинаю со следующим кодом:

<div id="toBeZoomedOut"> 
    <div>something</div> 
    <div><img src="background.jpg"></div> 
</div> 

#toBeZoomedOut { 
    background-color: black; 
    border: 1px solid #AAAAAA; 
    color: white; 
    width: 300px; 
    height: 300px; 
    margin-left: auto; 
    margin-right: auto; 
    -webkit-transition: 1s ease-in-out; 
    -moz-transition: 1s ease-in-out; 
    transition: 1s ease-in-out; 
} 

#toBeZoomedOut img { 
    height: 250px; 
    width: 250px; 
} 

#toBeZoomedOut:hover { 
    zoom: 0.5; 
} 

Проблема с этим кодом является то, что он отъезжает на компоненты вниз (родительский DIV), и сразу же отъезжает, что внутри она затем возвращается, чтобы увеличить компоненты.

В основном это небольшая багги. Какие-нибудь полезные исправления, чтобы уменьшить масштаб изображения? Было бы здорово, если бы я мог уменьшить все вместе до определенного места на странице и до определенной ширины/высоты (например, масштабировать все влево: 100 пикселей, верх: 100 пикселей, а родительский div должен быть: 100 пикселей * 100 пикселей и все остальное относительное по размеру).

Насколько я понимаю, это может быть проще с JavaScript? Любая помощь?

Последнее замечание, если вы заметили, что анимация на самом деле не отражает анимацию масштабирования. Хотя это будет дополнительным плюсом, реальная анимация увеличения будет отличной.

Заранее спасибо :)

jsfiddle ссылку, чтобы сделать его проще: http://jsfiddle.net/HU46s/

Answer 1

Я использую универсальный селектор, чтобы предназначаться все внутри родительского контейнера, чтобы применить к нему css-переходы.

Следующее, что я сделал, - это изменение ширины внутреннего содержимого до % для удобства масштабирования.

Вот CSS:

#toBeZoomedOut * { 
    -webkit-transition: all 1s ease; 
    -moz-transition: 1s ease; 
    transition: 1s ease; 
} 

Наконец, скрипку: Demo

Answer 2

Для того, чтобы все изображения и DIV фона масштаба в то же время вы должны использовать процентный размер для # ZOOMER-внутри элементов и задайте конкретные размеры шрифта ...

Однако не гладкий, если вы хотите получить более гладкий результат, я предлагаю вам использовать jQuery в сочетании с некоторым методом анимации() или плагином.

Fiddle:http://jsfiddle.net/HU46s/1/

Код:

#toBeZoomedOut { 
    background-color: black; 
    border: 1px solid #AAAAAA; 
    color: white; 
    width: 300px; 
    height: 300px; 
    margin-left: auto; 
    margin-right: auto; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 
} 
#toBeZoomedOut div, #toBeZoomedOut img { 
    width: 90%; 
    font-size: 20px; 
} 
#toBeZoomedOut img { 
    height: 90%; 
    width: 90%; 
} 

#toBeZoomedOut:hover { 
    zoom: 0.5; 
} 

ровнее по JQuery:

Fiddle:http://jsfiddle.net/HU46s/5/

Код: JQuery - ровнее решение (даже меньше CSS):

$('#toBeZoomedOut').hover(/* change the animation speed as you want :) */ 
    function(){ 
     $(this).animate({ 'zoom': 0.5}, 400); //animation speed 400=0.4s ! 
    }, 
    function(){ 
     $(this).animate({ 'zoom': 1}, 400); //animation speed 400=0.4s ! 
    } 
); 

... с этим только CSS вам нужно, это:

#toBeZoomedOut { 
    background-color: black; 
    border: 1px solid #AAAAAA; 
    color: white; 
    width: 300px; 
    height: 300px; 
    margin-left: auto; 
    margin-right: auto; 
} 

#toBeZoomedOut img { 
    width: 250px; 
}