Redimensionner un ensemble d'éléments HTML

Question

J'ai le code HTML similaire à

<div id="resizeThis"> 
<div style="background: url(...)">...text...images...</div> 
... 
</div> 

Je veux redimensionner la div avec tout son contenu à la taille arbitraire. Par exemple, je pourrais utiliser JavaScript pour obtenir la largeur div puis redimensionner tous les éléments en conséquence, mais quelle est la manière la plus simple de le faire? Je peux utiliser jQuery, j'ai essayé:

$("#resizeThis > *").css('width', '64px').css('height', '64px'); 

mais il ne Shrinked les #resizeThis et non ses enfants. Et que puis-je faire à propos des arrière-plans, du texte, etc?

Je veux faire ceci afin que je puisse générer des miniatures (généralement 25% de la taille d'origine).

Answer 1

J'ai trouvé une solution parfaite!

Je fais juste:

$('#resizeThis').css('-webkit-transform', 'scale(0.5)'); 

et redimensionne tous les éléments sous correctement! :)

Il existe également une version Gecko pour cela. Cela convient parfaitement à mes besoins. Ne pas utiliser votre navigateur pour redimensionner des images.

Answer 2

Vous ne pouvez pas modifier la largeur des éléments en ligne (p et travée par exemple). Vous ne pouvez définir la largeur que pour les éléments de bloc (affichage: bloc). Bien sûr, vous pouvez modifier la propriété d'affichage pour les éléments en ligne, mais cela causera plus de problèmes.

La seule chose que vous pouvez faire avec les éléments de texte est de changer la taille de la police. Cependant, il est impossible de définir une largeur absolue pour les éléments contenant du texte. Le texte devra soit déborder, soit une barre de défilement apparaîtra.

Answer 3

Essayez cette

$("#resizeThis *").css('width', '64px').css('height', '64px'); 

L'opérateur > sélectionne uniquement les enfants immédiats.

La commande ci-dessus sélectionnera tous les enfants de #resizeThis, mais vous voulez aussi la div. Essayez:

$("#resizeThis").find("*").andSelf().css('width', '64px').css('height', '64px'); 

Aussi, avez-vous pensé à utiliser une classe CSS au lieu de plusieurs appels à .css().

E.g.

$("#resizeThis *").find("*").andSelf().addClass("MyCssClass");