Масштаб div как изображение

Question

Я пытаюсь масштабировать контент в div на основе его ширины.

В качестве примера, у меня есть DIV:

<div id="container"></div> 

У меня есть стиль, такие как:

#container { margin: 0px auto; width: 810px; height: 800px; border: 1px solid #000; } 

Это представляет меня с DIV 810px в ширину и 800px в высоту, красиво в центре экрана с контур.

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

У меня есть фоновая графика для контейнера div, установленного в масштабе с шириной, а также отлично работает.

Мне нужна помощь, скажем, у меня заголовок под баннером, но этот размер шрифта необходимо масштабировать со всем остальным, исходя из ширины контейнера. Как бы я это сделал?

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

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

Я посмотрел на масштабирование текста, как в этой ссылке: http://jsfiddle.net/Aye4h/

Это идеальное поведение, но мне нужно больше, чем просто текст для масштабирования.

Answer 1

Масштабирование - это сложный вопрос, поскольку некоторый контент векторный или иным образом отображается по требованию, а некоторый контент - на основе растра (например, изображения). Если вы хотите масштабировать весь элемент, как если бы это было только изображение, а затем посмотреть на transform: scale:

#scaled { 
 
    border: #f00 solid 5px; 
 
    background: #0ff; 
 
    height: 500px; 
 
    margin: -125px; 
 
    transform: scale(0.5); 
 
    width: 500px; 
 
}

<h1>This is outside the scaled element</h1> 
 
<div id="scaled"> 
 
    <h2>Inside the scaled element</h2> 
 
    <p>An image:</p> 
 
    <p><img src="http://i.imgur.com/3A1Loxw.jpg"></p> 
 
</div>

Имейте в виду, что transform применяется после того, как изображение было положено на странице, поэтому весь контент вокруг него будет думать, что он все еще в оригинальном размере. Вы можете обойти это многими другими способами, например, используя отрицательные значения margin (как я сделал в примере).