Автонастройка ширины блока в соответствии с шириной img

[buddah]

Задача довольно простая. Есть блок со статьей. В этом блоке есть img с иллюстрацией. Нужно сделать так, чтоб ширина блока равнялась ширине загружаемого img (либо ширине блока, что содержит наш img, но это уже мелочи).

Допустим есть такой вот макет:

Самое простое, что приходит в голову - это jQuery. Вот пример элементарной реализации: http://jsfiddle.net/audetwebdesign/bpN8x/

Проблема в том что на долю секунды, пока не загрузился рисунок, блок растягивается на 100% ширины родителя и верстка дергается.

Есть способ избежать такого поведения?

p.s. знаю вроде что это можно как-то решить с помощью использования таблиц, но я их ярый противник, хотелось бы избежать этого.

[mishka]

Как вариант, блоку опаситив 0. После загрузки картинки опаситив 1

[Searcher]

float?

inline-block?

[buddah]

mishka, не катит, но вроде меньше дергает, когда к коду добавляю еще подгонку ширины родительского под img.

Searcher, float под содержимое подстраивается, а содержимого много (текст). Ширину задавать нельзя, картинки разными могут быть.

inline-block не понимаю как может помочь тут, возможно зациклился на js и не вижу самого очевидного.

updated: я точно что-то делаю не так. Ведь откуда jQuery возьмет свойство css.width, если оно явно не задается нигде. Если не задать явно картинке ширину, то возвращает 0. И правильно делает. Думай, Саша, думай...

Edited February 24, 2012 by buddah

[mishka]

По картинке можно только гадать что ты там делаешь.

Первый вариант -- display: table-cell. ие6-7 идут лесом. Блоки не будут "падать" на несколько рядов, если ты вывидешь например 4 блока. (хотя если у родителя небудет display: table, то может и будут падать).

Вобщем это теория, на практике надо проверять.

Вариант второй:

Изначально в css блокам этим задавать opacity: 0;

А джсом, после загрузки картинки делать opacity: 1;

для варианта когда JS отключен, можно прописать стили в <noscript>

Дай пример кода.

updated: я точно что-то делаю не так. Ведь откуда jQuery возьмет свойство css.width, если оно явно не задается нигде. Если не задать явно картинке ширину, то возвращает 0. И правильно делает. Думай, Саша, думай...

jQuery нормально ловит ширину имеющегося блока. Даже если ее явно не задавать.

Вот с шириной картинки хуже.

Вебкиты ее нормально ловят только после ее загрузки(в случае если на ней явно не заданы width/height).

Тоесть скрипт должен работать не на

$(document).ready

а на

$(window).load

[buddah]

mishka, да там особо нечего показывать, я только начал. Вот.

Забудем про дерганье, сосредоточимся на высчитывании ширины картинки.

Вот такую красоту можно наблюдать при не указании явно ширины img.

$(window).load работает во всех браузерах, спасибо, коллега. Век живи век учись.

Теперь другая проблема. Правильно высчитывается ширина только для первого article и второму присваивается она же. Что в общем-то логично. Здесь нужны манипуляции с each()?

Здесь я могу схалтурить и нахаркодить, но хотелось бы более изящное решение.

Edited February 24, 2012 by buddah

[mishka]

да. each для этих блоков. Внутри ловишь картинку, узнаешь ширину, задаешь родителю.

типа так:

$(window).load(function() {
    $("article").each(function() {
        var theWidth = $(".imgholder img", this).width();

        $(".imgholder", this).css('width', theWidth);
        $(this).css('width', theWidth);
    });
}); 

Это очень черновой приближенный набросок. Надеюсь ты будешь юзать класс, а не просто $("article")

[buddah]

да. each для этих блоков. Внутри ловишь картинку, узнаешь ширину, задаешь родителю.

типа так:

$(window).load(function() {
    $("article").each(function() {
        var theWidth = $(".imgholder img", this).css('width');

        $(".imgholder", this).css('width', theWidth);
        $(this).css('width', theWidth);
    });
}); 

Это очень черновой приближенный набросок. Надеюсь ты будешь юзать класс, а не просто $("article")

Да, конечно будут классы) Спасибо большое, что помог, я хоть и редко обращаюсь за помощью, но очень ценю это. Будем разбираться, теперь мне все понятно)