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 -webkit-transform上试用.clone()和其他类似的css样式。像，

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

不确定这是否有效，但它的想法是：）

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