7/21/2019 06 Images

http://slidepdf.com/reader/full/06-images 1/7

IMAGES

PROF. DAVID ROSSITER

1/

7/21/2019 06 Images

http://slidepdf.com/reader/full/06-images 2/7

AFTER THIS PRESENTATION

You'll be able to handle images

2/

7/21/2019 06 Images

http://slidepdf.com/reader/full/06-images 3/7

ELEMENTS & ATTRIBUTES WE WILL LOOK AT

<img> src attribute

width attribute

height attribute

3/

7/21/2019 06 Images

http://slidepdf.com/reader/full/06-images 4/7

IMAGES

Use img to bring an image into the web page

<img  src="stella_photo.jpg">

4/

7/21/2019 06 Images

http://slidepdf.com/reader/full/06-images 5/7

CONTROLLING THE EXACT SIZE

Add width="number" and height="number"

<img  src="stella_photo.jpg"  width="300"  height="300">

5/

7/21/2019 06 Images

http://slidepdf.com/reader/full/06-images 6/7

CONTROLLING SIZE WITH CORRECT RATIO

Use only one of width or height

<img  src="stella_photo.jpg"  width="300">

6/

7/21/2019 06 Images

http://slidepdf.com/reader/full/06-images 7/7

CONTROLLING THE RELATIVE SIZE

Add width="number%" and height="number%"

<img  src="stella_photo.jpg"  width="50%">

The percentage value is relative to the thing which

contains the image, which we call the parent

7/