We were looking for the simplest possible solution to enlarge an image on click, without javascript and with the least amount of code possible.
a first attempt
At first we found the pseudo-class focus as a solution: with this css code img:focus and in html (inside the img tag) tabindex="0".
In this way, the image expanded on click, but to make it return to the initial size, it was necessary to click outside the enlarged image. As in the following example:
an important step
Therefore we had to add other code, so that we could return to the original, small, size, clicking inside the image. We had to use the input tag.
Today I followed this way: link rather than embed the images, so that the odb file can remain of small size.
1. in edit view add a text box in your form and
2. convert it (replace with) to a image control
3. in normal view double click on the new box and select the image, which will not embedded, but linked.
with mysql
If you use a mysql database you can set the field as varchar (at least 150 char) and insert the location, such as http://localhost/your-path/yourfile.jpg.
Then you can add this field as data in the text box (as above).