Изменить размер набора элементов HTML - PullRequest
Новая
       6

Изменить размер набора элементов HTML

3 голосов
/ 20 января 2010

У меня есть HTML-код, похожий на 

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

Я хочу изменить размер div со всем его содержимым до произвольного размера. Например, я мог бы использовать JavaScript, чтобы получить ширину div, а затем соответствующим образом изменить размеры всех элементов, но каков самый простой способ сделать это? Я могу использовать jQuery, я пытался: 

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

но это только уменьшило #resizeThis, а не его потомков.

А что я могу сделать с фонами, текстом и т. Д.?

Я хочу сделать это, чтобы создавать миниатюры (обычно 25% от исходного размера).

Ответы [ 3 ]

2 голосов
/ 20 января 2010

Попробуйте это 

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

Оператор > будет выбирать только непосредственных детей.

Выше будет выбрано все дочерние элементы #resizeThis, но вы также хотите div. Попробуйте: 

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

Кроме того, не задумывались ли вы об использовании класса CSS вместо нескольких вызовов .css().

* 1014 Е.Г. * 

$("#resizeThis *").find("*").andSelf().addClass("MyCssClass");
1 голос
/ 20 января 2010

Я нашел идеальное решение!

Я просто делаю: 

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

и он корректно изменяет размеры всех элементов под ним!:)

Для этого есть версия Gecko.Это полностью соответствует моим потребностям.

0 голосов
/ 20 января 2010

Вы не можете изменить ширину встроенных элементов (например, p и span). Вы можете установить ширину только для элементов блока (display: block). Конечно, вы можете изменить свойство display для встроенных элементов, но это вызовет больше проблем.

Единственное, что вы можете сделать с текстовыми элементами, это изменить размер шрифта. Однако невозможно установить абсолютную ширину для элементов, содержащих текст. Текст будет либо переполнен, либо появится полоса прокрутки.

...