?

Log in

No account? Create an account

Как масштабировать мозаику из картинок в HTML - Общество дровосеков Бердичева по изучению Мишны

May. 8th, 2014

03:08 pm - Как масштабировать мозаику из картинок в HTML

Previous Entry Share Next Entry

Есть у меня маленькая картинка. Ее в 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:

Comments:

[User Picture]
From:maksa
Date:May 8th, 2014 10:25 pm (UTC)
(Link)
Обязательно задавать каждую картинку отдельно? background-image (с повторением одной и той же картинки) не подойдёт?
(Reply) (Thread)
[User Picture]
From:spamsink
Date:May 8th, 2014 10:36 pm (UTC)
(Link)
Это был тривиальный пример. На практике картинки будут хоть и одного и того же размера, но разные.
(Reply) (Parent) (Thread)
[User Picture]
From:maksa
Date:May 8th, 2014 10:58 pm (UTC)
(Link)
Картинки должны масштабироваться вместе с изменением размера окна? То есть, скажем, давать в сумме 60 % от ширины окна?

А что если загнать их в таблицу (каждая картинка — фон каждой ячейки)?
(Reply) (Parent) (Thread)
[User Picture]
From:spamsink
Date:May 8th, 2014 11:24 pm (UTC)
(Link)
Идея-то хорошая, но без содержимого размер ячеек будет нулевым.


(Reply) (Parent) (Thread)
[User Picture]
From:maksa
Date:May 8th, 2014 11:29 pm (UTC)
(Link)



<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>

Edited at 2014-05-08 11:33 pm (UTC)
(Reply) (Parent) (Thread)
[User Picture]
From:spamsink
Date:May 8th, 2014 11:37 pm (UTC)
(Link)
Допустим, картинок в строке чуть более сотни.
(Reply) (Parent) (Thread)
[User Picture]
From:b0p0h0k
Date:May 8th, 2014 11:43 pm (UTC)
(Link)
Понимаю. :)
Где-то на четверть больше.
(Reply) (Parent) (Thread)
[User Picture]
From:maksa
Date:May 8th, 2014 11:43 pm (UTC)
(Link)






Я спать; надеюсь, гуру вёрстки что-то подходящее всё-таки предложат.
(Reply) (Parent) (Thread)
[User Picture]
From:larisaka
Date:May 8th, 2014 10:38 pm (UTC)
(Link)
она перемасштабировала мне ленту, и следующий пост наложился прямо на нее. :)
(Reply) (Thread)
[User Picture]
From:spamsink
Date:May 8th, 2014 10:40 pm (UTC)
(Link)
Точно она? Если зайти на http://spamsink.livejournal.com/?style=mine , наблюдается ли эффект?

Edited at 2014-05-08 10:41 pm (UTC)
(Reply) (Parent) (Thread)
[User Picture]
From:larisaka
Date:May 8th, 2014 10:42 pm (UTC)
(Link)
да!
(Reply) (Parent) (Thread)
[User Picture]
From:larisaka
Date:May 8th, 2014 10:45 pm (UTC)
(Link)
ой, а если без ?style=mine, то все ок. что такое? так не может быть. я же в своем стиле in both cases
(Reply) (Parent) (Thread)
[User Picture]
From:spamsink
Date:May 8th, 2014 10:51 pm (UTC)
(Link)
Погрешности конкретного стиля. Я разлогинился, посмотрел в дефолтном стиле - всё в порядке.
(Reply) (Parent) (Thread)
[User Picture]
From:sasha_gil
Date:May 8th, 2014 11:26 pm (UTC)
(Link)
Я бы попробовал на объемлющем элементе (сделав его DIV-ом, не SPAN-ом для упрощения ситуации) CSS-стиль transform. Для конкретного старого браузера может потребоваться конкретный префикс, см., например, https://developer.mozilla.org/en-US/docs/Web/CSS/transform?redirectlocale=en-US&redirectslug=CSS%2Ftransform
(Reply) (Thread)
[User Picture]
From:spamsink
Date:May 9th, 2014 12:12 am (UTC)
(Link)
Неясно, что писать в transform:scale.
Из <div width="100%"><iframe style="transform:scale(100%, 100%); ..."> получился малюсенький фрейм в левом верхнем углу окна браузера, но картинки всё того же размера.
(Reply) (Parent) (Thread)
[User Picture]
From:spamsink
Date:May 9th, 2014 02:06 am (UTC)
(Link)
Сделал update. Почти идеально, спасибо!
(Reply) (Parent) (Thread)