¿Creando una réplica más pequeña de un div?

Tengo un div lleno de texto, fotos, etc. Se genera dinámicamente, y por lo general alrededor de 10: 1 ratio height: width.¿Creando una réplica más pequeña de un div?

Quiero crear una réplica de este div en la misma página, pero lo que es 1/8 de la anchura.

EDITAR: Todos los contenidos también deben estar en escala 1/8.

Esta delgada div visión general de altura no tiene que ser capaz de ser interactuado con, al mostrar con precisión el contenido de la otra div más grande.

¿Alguna idea de cómo debería/debería hacer esto?

Gracias!

Fuente

2011-05-22 fancy

¿Estás hablando de una miniatura? Entonces, ¿la imagen y el texto deberían tener 1/8 del tamaño? No sé cómo lograr eso, solo estoy pidiendo para asegurarme de que entiendo. –

Sí, todo debería ser a escala 1/8. – fancy

Solo una idea, puede probar el -webkit-transform y otros estilos de CSS en un jQuery .clone() de su div más grande. Al igual que,

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

No estoy seguro si eso funcionaría, pero su idea :)

Editar sé que esto no funcione en todos los navegadores por ahí, pero le ahorrará la molestia de cambiar el tamaño todos los elementos secundarios, creo.

Fuente

2011-05-22 02:42:52

@mu: lo siento, ¿no te entendí? –

Soy muy bueno perdiendo contexto :) –

Usted puede utilizar el método jQuery clon() para realizar el método de copiar y css() para cambiar el ancho.

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

Luego puede usar el método append() para colocar este clon en una nueva posición en su página. Sin embargo, tenga en cuenta que el nuevo ancho dependerá del contenido del div que está clonando. Por lo tanto, es posible que deba configurar el desbordamiento y así sucesivamente para asegurarse de que funciona correctamente.

Fuente

2011-05-22 01:33:34

¿Probablemente necesitaría crear otro conjunto de CSS con todas las propiedades de contenido interno (texto/imágenes/divs) (alto/ancho/tamaño) dividido por 8 si quisiera que se vea correcto? – fancy

@float Suena bien. use addClass() para agregar una clase css al div clonado y tenga todas las definiciones para la nueva clase en su archivo css. Dado que su dinámica si necesita ser específico sobre algunas dimensiones, tendrá que hacerlo de manera programática. –

De la parte superior de mi cabeza,

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

asentando después todas las propiedades individuales de tamaño sensible de $ cloneDiv a 1/8 de la de la original. Haga cosas como iterar sobre las imágenes para calcular su nueva altura/ancho.

Es una locura hacer esto con jQuery sin embargo, hacer todo lo que pueda con HTML y CSS y jQuery para usar los elementos más dinámicos.

Fuente

2011-05-22 01:38:09

¿Creando una réplica más pequeña de un div?

Respuesta

Cuestiones relacionadas