Kevin W. Tharp

Eagle

The Fluid Grid: Fluid Images page 2

To keep from losing my sanity and making my life way too complicated, I have now switched to a new stylesheet so I don't have to make my code too complicated to avoid taking away what I showed you in the previous lessons. The new stylesheet is fluidgridlesson-2.css.

To make this image fluid, we need to apply some sort of style to it. The way I will do this is to give the image the property of .scaleableimg. I did it as a class so that I could apply the same property to as many images on the same page as I desire. I then gave .scaleableimg the property of max-width:100% which will limit the size of the image to the object containing it. In the process I also took out the height and width properties of the element itself so that it would take advantage of the browser's ability to scale the image by changing both the height and the width.

Eagle targeting you for dinner