Question

Как сделать, чтобы фото, вставленное кодом $IMAGEх$, имело нужный мне размер на странице, а по клику увеличивалось бы?

Answer 1

1. Чтобы задать нужный размер, можно в Таблицу стилей CSS прописать нужные параметры примерно так:

.eMessage img {width:100px;height:100px;}

Вместо выделенного красным пропишите свой ширину и высоту изображениям.

2. По клику данное изображение увеличивается по умолчанию и что-то добавлять или менять здесь не нужно.

Comments

когда это удаляю, фотографии снова становятся большими

---

так и будет, вы при добавлении фото сразу задавайте ее точный размер - http://i.imgur.com/T8gqvuO.png

---

там при одинаковых параметрах высоты и ширины, фото остаются прямоугольными

---

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

Иначе делаем по другому, к примеру завертываем данные коды изображений в новый идентификатор - http://i.imgur.com/QtSEZac.png :
<div id="picter">$IMAGE1$ $IMAGE2$ $IMAGE3$ $IMAGE4$</div>

Далее в таблице стилей задаем свои стили и размеры для идентификатора:
#picter img {width:88px;height:88px;}
Старые стили, что выше вы сохранили удалите в таком случае.

Параметры - 88px меняем под нужную вам высоту и ширину.

---

Зачем дублировать темы(пропало качество фотографий в каталоге), я вам выше ответил удалите с Таблицы стилей CSS:
#content img {width:88px;}
#content img {height:88px;}
Это и есть причина.