Вывод миниатюр из большого изображения.
 

Доброго времени суток всем :)
Вопрос таков. Как вывести миниатюру из большого изображения не изменяя реальных размеров картинки(файла),
На сервере лежит папка с изображениями. Нужно выводить миниатюры, но не создавая файлов миниатюр. (Это я знаю как сделать на php). Хотелось бы, чтобы подгружало большую картинку, но выводило её в маленьком размере. Как то так. За ранее благодарен за ответы :)

Эм...

<img src="big.png" width="50" height="50">

Не?

Да ну? Так просто? Я думал это делается средстваим JqueryUI иль еще какой фичей :)

:blink: Может я чего-то не понимаю? Атрибуты width и height отвечают за отображаемый размер элемента. Если вам надо ужать отображаемый размер картинки, то они прекрасно с этим справятся. Но на скорость загрузки это никак не повлияет т.к. грузиться будет полноценная большая картинка. Это как бы основы HTML... В CSS оно, кстати, тоже есть.

Оно то конечно работает, но есть одно НО! Миниатюра искажается под заданный размер :) Изображения будут вытаскиваться по именам с базы, и размеры у низ будут совершенно разные. По этому деформация такая будет не всегда адекватно смотреться. Тем более по клику эта кратинка будет разворачиваться в полный размер и будет очень сильно заметно что миниатюра "слегка" не соответствует оригиналу :)

Можно указать width, но не указывать height. Ну или наоборот. Тогда оно сохранит пропорции. Но миниатюры они как бы для того и делаются чтобы без надобности большие картинки не грузить...

Можно вот так, но это не совсем готовый вариант, поскольку я не знаю как получит изначальный размер картинки не указывая его.

<img src="http://sundalimusic.ru/image/687474703a2f2f776f6d656e776f726c642e636f6d2e75612f77702d636f6e74656e742f75706c6f6164732f323031322f30372f6f64657a6864612e6a7067">
        <img id="La" width="834" height="448" src="http://sundalimusic.ru/image/687474703a2f2f776f6d656e776f726c642e636f6d2e75612f77702d636f6e74656e742f75706c6f6164732f323031322f30372f6f64657a6864612e6a7067">
        <script>
            var tagImg = document.getElementById("La");
            tagImg.width = tagImg.width/1.5;
            tagImg.height = tagImg.height/1.5;
        </script>

Интересное предложение :) Мне миниатюры не особо нужны, так как проект будет работать внутри сети. А тут я уж думаю со скоростью проблем не будет для загрузки картинок :)))

А вообще спасибо за подсказку. Довольно таки интересно :)

Самый простой вариант:

<img width="300" src="http://sundalimusic.ru/image/687474703a2f2f776f6d656e776f726c642e636f6d2e75612f77702d636f6e74656e742f75706c6f6164732f323031322f30372f6f64657a6864612e6a7067">

Два момента.

1. В вашем случае javascript вообще трогать не надо, это чистый CSS.
Вот этот код выведет картинку, не выходящую за границы квадрата 100*100 пикселей и сохранит ее пропорции:

<img style="max-width: 100px; max-height: 100px;" src="http://sundalimusic.ru/image/687474703a2f2f776f6d656e776f726c642e636f6d2e75612f77702d636f6e74656e742f75706c6f6164732f323031322f30372f6f64657a6864612e6a7067">

2. Если нужно облегчить страничку, то как правило на сервере генерируют две картинки: обычную, и миниатюру (ужимают обычную картинку до маленького разрешения). Т.е. когда надо подгрузить миниатюру, грузят картинку миниатюры, когда надо обычную - ставят обычную, и т.д.