• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 12. Box Properties > fit and fit-position Properties

12.38. fit and fit-position Properties

These CSS3 properties are designed to tell the browser how to scale an image if its width or height values are not explicitly set.

The fit property can take one of four values: fill, none, meet and slice. fill is the default, and tells the browser to scale the object to fit the “box” it is contained within. The none value tells the browser to do nothing, and leave the image as is. The meet value also tells the browser to scale the object, but unlike fill, meet tells the browser to keep the aspect ratio of the image intact. Finally, slice is an odd opposite of meet: the browser must preserve the aspect ratio first, scaling the image to fit the size of the box so that the likely result you will get from this is a “slice” of the original image showing. Figure 12-39 gives you an idea as to how all of these different values for fit would work (note that the images would be clipped outside of the box area — they are left intact in this example to better illustrate the differences between the values).


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint