| <!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, max-width less than intrinsic</title> | |
| <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/> | |
| <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"><![CDATA[ | |
| img.constrained { | |
| border: 3pt solid black; | |
| max-width: 200px; | |
| image-fit: contain; | |
| } | |
| ]]></style> | |
| </head> | |
| <body> | |
| <p>Reference image</p> | |
| <div><img src="oriented-images/house-orientation-1.jpg" alt="Failed: image missing"/></div> | |
| <p>The image below should fill the black border with no white space between the border and the image. It should be smaller than the reference image, but maintain the aspect ratio.</p> | |
| <div><img src="oriented-images/house-orientation-1.jpg" alt="Failed: image missing" class="constrained" /></div> | |
| </body> | |
| </html> |