image-fit-006.xht (1165B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: Object Fit - 'fill', explicit 'height'/'width'</title> 5 <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/> 6 <link rel="help" href="https://www.w3.org/TR/css-images-3/#the-object-fit"/> 7 <meta name="assert" content="The 'fill' value of the 'object-fit' property does not affect the usual calculation of the used 'height' and 'width."/> 8 <meta name="assert" content="The 'fill' value of the 'image-scaling' property scales the content height and width independently so that the edges of the content just meet the edges of the box established by the used 'height' and 'width'."/> 9 <style type="text/css"><![CDATA[ 10 img { 11 border: 5px solid blue; 12 height: 50px; 13 width: 100px; 14 object-fit: fill; 15 background: red; 16 } 17 ]]></style> 18 </head> 19 <body> 20 <div>The image below should fill the blue border with no red between the border and the image.</div> 21 <div><img src="support/intrinsic-size.jpg" alt="Failed: image missing" /></div> 22 </body> 23 </html>