portsoc / img101

Examples for working with images in HTML.

Working with Images

We have prepared a collection of image examples that you can interact with on the web at: https://soc.port.ac.uk/img101

Download / Install

You should get a copy the source code by, either:

• downloading this zip file, or
• cloning this github repository.

We recommend you clone the repo, rather than downloading the zip, but if you do download the zip file you should uncompress it to a folder on your local machine (do not just open the zip and use the examples directly).

Use

Open the `img101`` folder in your preferred text editor - (we recommend you use VSCode but if you prefer an equally capable or better editor that's fine - just dont use Notepad).

Task

For each page,

1. look at what it does, then
2. look at the source code to see how it's done, then
3. look at the questions and suggestions in the page * To answer the questions you will need to edit the page. * You can open the page on its own by shift-clicking on the menu. * When you edit the page, reload it to see how it has changed. * Record your discoveries for each question
4. When you have completed the examples, experiment.

img101's Issues

jumpy picture size in example 12

in example 12, with the fish size, the picture size jumps because it stays 100% width. I'd suggest setting the height to something fixed instead, so the person in the picture stays a similar size all the time, just shows a bigger fish when there's space.