tailieunhanh - CSS Mastery- P6

CSS Mastery- P6: The human race is a naturally inquisitive species. We just love tinkering with things. When I recently bought a new iMac, I had it to bits within seconds, before I’d even read the instruction manual. We enjoy working things out ourselves and creating our own mental models of how we think things behave. We muddle through and only turn to the manual when something goes wrong or defies our expectations. | LAYOUT If the image needs to be on the page as an image element try setting the width of the container element to 100 and the overflow property to hidden. The image will be clipped on the right-hand side so that it fits inside the branding element but will scale as the layout scales branding width 100 overflow hidden div id branding img src img width 1600 height 171 div For regular content images you will probably want them to scale vertically as well as horizontally to avoid clipping. You can do this by adding an image element to the page without any stated dimensions. You then set the percentage width of the image and add a max-width the same size as the image to prevent pixelization. For example say you wanted to create a news story style with a narrow image column on the left and a larger text column on the right. The image needs to be roughly a quarter of the width of the containing box with the text taking up the rest of the space. You can do this by simply setting the width of the image to 25 and then setting the max-width to be the size of the image in this case 200 pixels wide .news img width 25 max-width 200px float left display inline padding 2 .news p width 68 float right display inline padding 2 2 2 0 227 CHAPTER 8 As the news element expands or contracts the image and paragraphs will also expand or contract maintaining their visual balance see Figure 8-13 . However on standards-compliant browsers the image will never get larger than its actual size. lorem apwm dolor M amet. consectetuer adiprtcing ed dlam nonumm euitmod Uncldum ut laorMt dotar magna akquam erar wolutpat. Ut wiw crwn ad minan wemam qim nottrud exertl tation ultamrorper MMClpft lobortlt nl i iM afaqulp a commodo romequat DuM autem vel eum iriure dokx in hendrent m xuiputat llt mí moleM comaouM. v l Hkim dolor eu ftugiat nulla fardan at vero ero el accurntan et u to odx gM wrn. Figure 8-13. Giving images a percentage width allows them to scale nicely in relation to their .