创建一个较小的div副本？

Question

我有一个充满文字，照片等的div。它是动态生成的，通常比例高度：宽度约为10：1。

我想在同一页面上创建这个div的副本，但是它的宽度是1/8。

编辑：所有内容也应该是1/8比例。

这个瘦高的概述div不需要能够与之交互，只需准确地显示其他较大div的内容。

任何想法我将如何/应该这样做？

谢谢！

Answer 1

您可以使用jQuery clone（）方法使copy和css（）方法更改宽度。

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

然后，您可以使用append（）方法将此克隆放置在页面上的某个新位置。 但请注意，新宽度将取决于您要克隆的div的内容。 因此，您可能必须设置溢出等，以确保它正常工作。

Answer 2

在我的头顶，

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

然后将$ cloneDiv的所有单个大小敏感属性设置为原始的1/8。 做一些事情，比如迭代图像来计算它们的新高度/宽度。

用jQuery做这件事是疯狂的，尽可能多地使用HTML和CSS，并使用jQuery来获得更多动态元素。

Answer 3

只是一个想法，您可以在更大的div的jQuery .clone()上尝试-webkit-transform和其他此类css样式。 喜欢，

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

不确定这是否有用，但它的想法:)

编辑我知道这可能不适用于所有浏览器，但我相信它会省去调整所有子元素大小的麻烦。