HTML CSS examples for CSS Property:background
Set how image background would cover the background by object-fit
<html> <head> <title>object fit property</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> img {<!-- w w w .j av a 2s . c o m--> float: left; width: 150px; height: 100px; border: 1px solid #000; margin-right: 1em; } .fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } .none { object-fit: none; } .scale-down { object-fit: scale-down; } </style> </head> <body> <img src="https://www.java2s.com/style/demo/InternetExplorer.png" alt="Webplatform Logo" class="fill"> <img src="https://www.java2s.com/style/demo/Safari.png" alt="Webplatform Logo" class="contain"> <img src="https://www.java2s.com/style/demo/Firefox.png" alt="Webplatform Logo" class="cover"> <img src="https://www.java2s.com/style/demo/Safari.png" alt="Webplatform Logo" class="none"> <img src="https://www.java2s.com/style/demo/Opera.png" alt="Webplatform Logo" class="scale-down"> <p style="clear:both"> (see http://docs.webplatform.org/wiki/css/properties/object-fit and http://caniuse.com/object-fit ) </p> </body> </html>