<!DOCTYPE html>
<html>
<head>
<style>
.fill {object-fit: fill;}.contain {object-fit: contain;}.cover {object-fit: cover;}.scale-down {object-fit: scale-down;}.none {object-fit: none;}</style>
</head>
<body>
<h1>object-fit 属性</h1>
<h2>No object-fit:</h2>
<img src="/i/photo/tulip.jpg" alt="Tulip" style="width:200px;height:400px">
<h2>object-fit: fill (this is default):</h2>
<img class="fill" src="/i/photo/tulip.jpg" alt="Tulip" style="width:200px;height:400px">
<h2>object-fit: contain:</h2>
<img class="contain" src="/i/photo/tulip.jpg" alt="Tulip" style="width:200px;height:400px">
<h2>object-fit: cover:</h2>
<img class="cover" src="/i/photo/tulip.jpg" alt="Tulip" style="width:200px;height:400px">
<h2>object-fit: scale-down:</h2>
<img class="scale-down" src="/i/photo/tulip.jpg" alt="Tulip" style="width:200px;height:400px">
<h2>object-fit: none:</h2>
<img class="none" src="/i/photo/tulip.jpg" alt="Tulip" style="width:200px;height:400px">
</body>
</html>