| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <title>CSS Test: Image Fit - 'contain' and 'max-height'</title> | |
| <link rel="help" href="http://www.w3.org/TR/css3-page/#the-fit"/> | |
| <meta name="assert" content="The 'contain' value of the 'image-scaling' property does not affect the usual calculation of the used 'height' and 'width' except if both 'height' and 'width' are 'auto', and the used value of at least one of 'max-width' and 'max-height' is not 'none', in which case the element's used width and used height are calculated as though the intrinsic dimensions of the contents were infinitely large numbers whose ratio is the actual intrinsic ratio of the contents."/> | |
| <style type="text/css"> | |
| img { | |
| border: 5px solid lime; | |
| max-height: 200px; | |
| image-fit: contain; | |
| } | |
| div.container { | |
| background: red; | |
| height: 210px; | |
| border: 5px green solid; | |
| margin-bottom: 2em; | |
| } | |
| .square { | |
| width: 210px; | |
| } | |
| .taller { | |
| width: 170px; | |
| } | |
| .shorter { | |
| width: 110px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p>The images below should be edged with a lime border nested inside a | |
| green border. Each image contains 8 patterns of nine black dots. There must be no red on the page.</p> | |
| <div class="container square"><img src="http://www.savagecreek.net/images/min-max.jpg" alt="Failed: image missing" /></div> | |
| <div class="container taller"><img src="http://www.savagecreek.net/images/min-max-10.jpg" alt="Failed: image missing" /></div> | |
| <div class="container shorter"><img src="http://www.savagecreek.net/images/min-max-18.jpg" alt="Failed: image missing" /></div> | |
| </body> | |
| </html> |