Как сделать через JScript/CSS автомасштабирование вставленного в пост изображения с ссылкой на оригинал?

Question

[Stilar]

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

При вставки в статью изображения, которое шире зоны контента, изображение можно масштабировать (уменьшить) через max-width:100%, что бы оно не разнесло шаблон сайта (тут, на тостере, так и сделано)

Пример (изображение в 2048px):


Вопрос: как дать посетителю возможность открыть изображение и на весь экран? (по клику на него)

Обременения:
- далеко не все изображения большие. для не масштабированных не нужно давать возможность клика.
- при разных размеров экрана могут быть разные max-width

Answer 1

[Александр]

Можно сделать с помощью любой галереи, в данном случае fancybox
Например вот так
но потребуется знать размеры оригинального изображения

Comments

[Stilar]

к сожелению размеры изображения нам не известны - они могут быть любыми - это может быть изображения из интернета, а не с самого сервера.

[Александр]

не правильное решение грузить всем большие картинки и сжимать их под размер родительского элемента, но насколько я понял, из вашей задачи, видимо так оно и есть.
Тогда вот jsfiddle.net/19hzy3w5/2

[Stilar]

да, именно оно.
Спасибо Вам и другим коллегам за ответы!

Answer 2

[Алексей Зуев]

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

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