Upload
pedro-pamplona
View
212
Download
0
Embed Size (px)
DESCRIPTION
06 Images
Citation preview
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/