Вопрос по css, css3, css-transforms, html5 – Масштабировать / масштабировать элемент DOM и занимаемое им пространство с помощью CSS3 transform scale ()

37

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

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

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

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

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

Вотa JS Bin for everyone to experiment in, сStylus как язык стайлинга. Также естьplain CSS version. Rory O'Kane
Итак, позвольте мне получить это прямо: вы хотите преобразовать дочерний элемент, и при этом вы хотите, чтобы CSS изменил высоту, ширину родительского элемента. Правильно? Если это так, то в CSS отсутствует наследование от потомка, то есть иерархическое наследование назад / вверх. user900360
@ AnubhavSaini, я не исключаю Javascript в своем вопросе. Моя цель - найти простое и надежное решение, которое работает во всех последних браузерах с поддержкой HTML5 (независимо от механизма). Чистый CSS был бы идеальным, но не обязательным. kanaka
Некоторые ссылки на CSS-преобразования:a demo of rotate, skew, and scale, Сеть разработчиков Mozilla наtransform а такжеtransform-origin свойства. Rory O'Kane

Ваш Ответ

1   ответ
9

HTML (спасибо Рори)

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Sandbox for Stack Overflow 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 (все еще началось с базы Рори)

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 - это единицы измерения, которые относятся к размеру шрифта текущего контекста.

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

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

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

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

(Вы также можете использовать max-width и max-height 100%, чтобы предотвратить выпадение изображения за пределы родительского элемента, но никогда не превышать их естественные размеры)

You can now control the scaling by tweaking the font-size on #content-to-scale. 1.1em roughly equals scale(1.1)

Это имеет некоторые недостатки: вложенные размеры шрифтов в ems применяются рекурсивно. Смысл, если у вас есть:

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

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

Error: User Rate Limit ExceededemError: User Rate Limit Exceededrem (“root em”) unitError: User Rate Limit ExceededremError: User Rate Limit ExceededhtmlError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded

Похожие вопросы