Масштабировать/масштабировать элемент DOM и пространство, которое он занимает, используя масштаб преобразования CSS3()

В середине моей страницы у меня есть элемент div с некоторым содержимым в нем (другие divs, images, whatever).

<div>
    before
</div>
<div id="content-to-scale">
    <div>something inside</div>
    <div>another something</div>
</div>
<div>
    after
</div>

Я хотел бы масштабировать этот элемент (контент-масштабирование) и все его дочерние элементы. Кажется, это работа для масштабирования масштаба CSS3. Однако проблема заключается в том, что это преобразование только для визуализации этой иерархии элементов, оно не меняет объем пространства (или позиции) элемента на странице. Другими словами, масштабирование этого элемента больше приведет к перекрытию текста "до" и "после".

Есть ли простой/надежный способ масштабирования не только визуального представления, но и количества занимаемого пространства?

Дополнительные очки для чистого CSS без Javascript. Еще больше очков для решения, которое делает правильную вещь с другими функциями преобразования, такими как вращение и перекос. Это не нужно использовать CSS3-преобразование, но его нужно поддерживать во всех последних браузерах, поддерживающих HTML5.

Ответы

Ответ 1

HTML (спасибо Rory)

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Sandbox for Qaru question http://stackoverflow.com/q/10627306/578288" />
<meta charset=utf-8 />
  <title>Sandbox for SO question about scaling an element both visually and dimensionally</title>
</head>
<body>

  <div id="wrapper">
    <div class="surrounding-content">
      before
    </div>

    <div id="content-to-scale">
      <div>something inside</div>
      <div><img src="http://placekitten.com/g/150/100"></div>
      <div>another something</div>
    </div>

    <div class="surrounding-content">
      after
    </div>
  </div>

</body>
</html>

CSS (все еще начато с базы Rory)

body {
  font-size: 13px;
  background-color: #fff;
}
#wrapper {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  border: 0.07692307692307693em solid #888;
  padding: 1.1538461538461537em;
}
.surrounding-content {
  border: 0.07692307692307693em solid #eee;
}
#content-to-scale {
  border: 0.07692307692307693em solid #bbb;
  width: 10em;
}
#content-to-scale {
  font-size: 1.1em;
}
#content-to-scale img {
  width: auto;
  height: auto;
  min-width: 100%;
  max-width: 100%;
}

Объяснение:

Я использую размер шрифта и ems для "масштабирования" размеров дочерних элементов.

Ems - это единицы измерения, относящиеся к текущему размеру контекста контекста.

Итак, если я скажу, что у меня размер шрифта 13px и граница 1 (желаемая ширина границы в пикселях) divded на 13 (текущий размер шрифта также в пикселях) = 0.07692307692307693em браузер должен отображать рамку 1px

Чтобы эмулировать заполнение 15px, я использую ту же формулу (желаемые пиксели)/(текущий размер шрифта в пикселях) = желаемые символы. 15/13 = 1.1538461538461537em

Чтобы приручить масштабирование изображения, я использую старый мой любимый: шкала сохранения естественного соотношения, позвольте мне объяснить:

Изображения имеют естественную высоту и ширину и соотношение между ними. Большинство браузеров сохранит это соотношение, если для ширины и высоты задано значение auto. Затем вы можете управлять желаемой шириной с минимальной шириной и максимальной шириной, в этом случае она всегда масштабируется до полной ширины родительского элемента, даже если она будет масштабироваться за пределами ее естественной ширины.

(Вы также можете использовать максимальную ширину и максимальную высоту 100%, чтобы изображение не выходило из границ родительского элемента, но никогда не масштабировалось за пределами их естественных размеров)

Теперь вы можете управлять масштабированием, настраивая размер шрифта на # content-to-scale. 1.1em примерно равно шкале (1.1)

У этого есть некоторые недостатки: вложенный размер шрифта в ems применяется повторно. Значение, если у вас есть:

<style type="text/css">
    div{
        font-size: 16px;
    }
    span{
        font-size: 0.5em;
    }
</style>
<div>
    <span>
        <span>
            Text
        </span>
    </span>
</div>

В итоге вы получите рендеринг "Текст" на 4 пикселя вместо 8px, который вы могли бы ожидать.