Как задать для изображения процентный масштаб, но не относительно родительского элемента, а относительно размера изображения в пикселях?

Question

[Павел Китьян]

Или я туплю под вечер или...

<img src="…" style="width: 50%"> и <img src="…"  width="50%">

дадут одно и то же в случае вложенности в какой-то div - они дадут 50% от ширины div-а.

А если, предположим, я решил вставить изображения с запасом разрешения (чтобы на ретине не размыло), то как же мне быть?

Comments

[Павел Китьян]

Можно, конечно, опять-таки js-ом это делать.

Answer 1

[Юрий Лобанов]

Да, в голову пока только приходит js
jsfiddle.net/iiil/e5yEL

Comments

[Павел Китьян]

Да. Но очень хотелось бы без js-а :)

[Павел Китьян]

Ведь надо же еще вешаться на onload для каждого изображения

[Юрий Лобанов]

@bookworm не обязательно. Можно размер изображения определить до его загрузки, вообще без загрузки, точнее.

[Павел Китьян]

Вообще без загрузки - серверными средствами? Дело в том, что у меня нет бэкенда. У меня только фронтенд. Конечно, там всё грузится быстро... Но всё равно, jQuery может же вызвать код до загрузки не имея ширину? Или нет?

Answer 2

[Константин Романов]

<div style="width: 50%;"> 
<img style="width:100%;" src="wallpaper-3032573.jpg" alt="" />
</div>

может так

Comments

[Павел Китьян]

Дык проблема в том, что div получит 50% от своего родителя. Это транзитивность :) Поменяли размер окна и кирдык.

Answer 3

[Юрий Лобанов]

@bookworm нет, не может. Точнее был даже такой вопрос Возможно ли на jQuery узнать размеры изображения по ссылке?
Но в примере изображение все равно грузится.
Вам советую или использовать серверные языки (но у Вас нет бэкэнда - отпадает), или повесить все на $(window).load
jsfiddle.net/iiil/e5yEL/3

Comments

[Павел Китьян]

Я имею ввиду, что код висящий на document.ready выполнится как-только дерево распарсится, так? Соответственно, jQuery обращаясь за шириной img может получить нули или undefined - разве нет?

$(window).load - вариант, но если изображений много, тогда получится, что пока не загрузятся все, те что успели подгрузится будут отрисованы как есть - с большим размером. Так что наверное лучше в document.ready пройтись по img и повесить им в load функцию изменения их размера.

P.S. У нас такая ситуация - бэкенда нет, т.к. нет веб-сервера. Но время подгрузки может быть большим, если материалы лежат, например, на удалённом сервер (на шаре).

[Павел Китьян]

Почему же всё-таки в вашем примере код срабатывает? Это совпадение выполнения с загрузкой или он каким-то образом ждёт/откладывается?

[Юрий Лобанов]

@bookworm на самом деле не каждый раз срабатывает. Ясное дело срабатывает, когда в кеше изображение, но когда чищу кеш - не срабатывает в первый раз.
В общем, решить вопрос можно, каким-то образом на jsfiddle решено, ведь если у них в поле js прописать код, то срабатывает каждый раз, посмотрел код - в head прописано как здесь
jsfiddle.net/iiil/e5yEL/6
Обратите внимание, теперь загрузка не по onLoad, а просто в head.
Но у меня по прежнему не срабатывает, не понимаю почему.
Вот и остается как Вы сказали - в document.ready пройтись по img и повесить им в load функцию изменения их размера.

[Юрий Лобанов]

Точнее как тут jsfiddle.net/iiil/e5yEL/7

[Павел Китьян]

Да. Есть правда и другой вариант - можно хранить две версии всех изображений и, определив, что ретина, менять в документ-реди всем img-ам src - дописывать туда, например, какой-то префикс.

Это может даже и лучше было бы, поскольку , запихивая большие не на ретину, мы оставляем задачу масштабирования (вниз) браузеру. А у некоторых алгоритмы дают хуже результат в некоторых случаях, чем масштабирование в графическом редакторе.

[Юрий Лобанов]

@bookworm ну вообще я давно хотел задать вопрос - а зачем так заморачиваться, почему не два изображения )
habrahabr.ru/post/139682