Создание меньшей копии div?

Question

У меня есть div, полный текста, фотографий и т. Д. Он генерируется динамически, и обычно в соотношении 10: 1 высота: ширина.

Я хочу создать копию этого элемента на той же странице, но с шириной 1/8.

РЕДАКТИРОВАТЬ: все содержимое также должно быть в масштабе 1/8.

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

Любые идеи, как я бы / должен был это сделать?

Спасибо!

Answer 1

Вы можете использовать метод jQuery clone () для создания метода copy и css () для изменения ширины.

  var w = $("#thediv").width();
  var clone = $('#thediv').clone().css("width", w/8);

Затем вы можете использовать метод append () для помещения этого клона в некоторыеновая позиция на вашей странице.Однако обратите внимание, что новая ширина будет зависеть от содержимого div, который вы клонируете.Поэтому вам, возможно, придется установить переполнение и т. Д., Чтобы убедиться, что он работает правильно.

Answer 2

Просто идея, вы можете попробовать -webkit-transform и другие подобные стили CSS на jQuery .clone() вашего большего div.Например,

$('#theDiv').clone().css('-webkit-transform', 'scale(.125, .125)');

Не уверен, что это сработает, но это идея:)

Редактировать Я знаю, что это может работать не во всех браузерах, ноЯ думаю, это избавит вас от необходимости изменять размеры всех дочерних элементов.

Answer 3

с макушки головы,

$origDiv = $('#originaldiv');
$cloneDiv = $origDiv.clone(true);

Затем установите все индивидуальные чувствительные к размеру свойства $ cloneDiv на 1/8 от оригинала. Делайте итерации по изображениям, чтобы вычислить их новую высоту / ширину.

Безумно делать это с jQuery, но делать как можно больше с HTML и CSS и использовать jQuery для более динамичных элементов.