Как масштабировать мозаику из картинок в HTML

[spamsink]

Есть у меня маленькая картинка. Ее в HTML можно масштабировать до любого размера, хоть фиксированного в пикселах:
,
хоть в процентах от размера окна браузера:


А вот если у меня есть мозаика из разных картинок (<span style="white-space: nowrap;"><img ...><img ...><img ...><br>...</span>), например (здесь для простоты одинаковые),





Можно ли средствами HTML/CSS её масштабировать как единое целое, пусть даже с помощью iframe?
Дробные проценты у каждой картинки не предлагать - работает плохо.

Upd: Текущее решение (кто лучше?):

<div style="transform-origin: 0 0; white-space: nowrap;" 
    onmouseover="this.style.transform='scale('
        +(window.innerWidth-40)/наперед известная суммарная ширина картинок
        +')';"
>....

Caveats:

• минус 40 (вроде хватает) - на случай наличия вертикального скроллбара; если его не учитывать, появляется горизонтальный скроллбар.
  
• onload у меня в не очень новом файрфоксе почему-то не работает.
  

Comments

[maksa.livejournal.com]

Обязательно задавать каждую картинку отдельно? background-image (с повторением одной и той же картинки) не подойдёт?

[spamsink]

Это был тривиальный пример. На практике картинки будут хоть и одного и того же размера, но разные.

[maksa.livejournal.com]

Картинки должны масштабироваться вместе с изменением размера окна? То есть, скажем, давать в сумме 60 % от ширины окна?

А что если загнать их в таблицу (каждая картинка — фон каждой ячейки)?

[spamsink]

Идея-то хорошая, но без содержимого размер ячеек будет нулевым.

[maksa.livejournal.com]

<table width="60%" cellpadding=0 cellspacing=0>
<tr>
<td width="25%"><img width="100%" src="http://l-userpic.livejournal.com/115509326/7162160"></td>
<td width="25%"><img width="100%" src="http://l-userpic.livejournal.com/115509326/7162160"></td>
<td width="25%"><img width="100%" src="http://l-userpic.livejournal.com/115509326/7162160"></td>
<td width="25%"><img width="100%" src="http://l-userpic.livejournal.com/115509326/7162160"></td>
</tr>
<tr>
<td width="25%"><img width="100%" src="http://l-userpic.livejournal.com/115509326/7162160"></td>
<td width="25%"><img width="100%" src="http://l-userpic.livejournal.com/115509326/7162160"></td>
<td width="25%"><img width="100%" src="http://l-userpic.livejournal.com/115509326/7162160"></td>
<td width="25%"><img width="100%" src="http://l-userpic.livejournal.com/115509326/7162160"></td>
</tr>
</table>

[spamsink]

Допустим, картинок в строке чуть более сотни.

[b0p0h0k.livejournal.com]

Понимаю. :)
Где-то на четверть больше.

[maksa.livejournal.com]

Я спать; надеюсь, гуру вёрстки что-то подходящее всё-таки предложат.

[larisaka.livejournal.com]

она перемасштабировала мне ленту, и следующий пост наложился прямо на нее. :)

[spamsink]

Точно она? Если зайти на http://spamsink.livejournal.com/?style=mine , наблюдается ли эффект?

[larisaka.livejournal.com]

да!

[larisaka.livejournal.com]

ой, а если без ?style=mine, то все ок. что такое? так не может быть. я же в своем стиле in both cases

[spamsink]

Погрешности конкретного стиля. Я разлогинился, посмотрел в дефолтном стиле - всё в порядке.

[sasha-gil.livejournal.com]

Я бы попробовал на объемлющем элементе (сделав его DIV-ом, не SPAN-ом для упрощения ситуации) CSS-стиль transform. Для конкретного старого браузера может потребоваться конкретный префикс, см., например, https://developer.mozilla.org/en-US/docs/Web/CSS/transform?redirectlocale=en-US&redirectslug=CSS%2Ftransform

[spamsink]

Неясно, что писать в transform:scale.
Из <div width="100%"><iframe style="transform:scale(100%, 100%); ..."> получился малюсенький фрейм в левом верхнем углу окна браузера, но картинки всё того же размера.

[spamsink]

Сделал update. Почти идеально, спасибо!