HTML5, CSS3, and JavaScript Fourth Edition

(Ben Green) #1

CHAPTER 5. IMAGE CROP AND RESIZE 57


see a more detailed view. In this section we show how to do these advanced
tricks.


5.4.1 Flow Around


Sometimes we want to insert a picture next to some text. We do not want
the picture to take up the whole row, but maybe be on the left or right edge
of the row, and have the text flow around it.


This can be easily done using the css float: parameter. We will talk about
float and clear later, but here is a short example.



The text that follows will appear to the right of the picture until the picture
ends, and then will take up the whole column.


5.4.2 Captions


Sometimes we want to associate some text with a picture. We might think
of this text as a caption.


This can be easily done using a table. We will talk about tables later, but
here is a short example. (trmeans table row.tdmeans table data.)





This is my caption.

5.4.3 Art Gallery


Sometimes we want a more-detailed image to be available for those that are
interested, but we do not want to slow down the webpage for everybody
else.


An example of this might be an art gallery page that shows many images
at a moderate resolution, like maybe 500px in the larger dimension, so they
will load quickly.

Free download pdf