CSS The object-fit Property

Posted on Edited on In Views: Disqus:

 

object-fit Property 是一種對 img tag 或 vedio tag 做不同縮放樣式的展現方式，

要特別注意的是 object-fit Property 完全不支援 IE 瀏覽器，

但支援 edge、chrome、firefox。

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            display: inline-block;
            margin-right: 20px;
        }
        img {
            border: 1px solid red;
        }
        .img200X400 {
            width: 200px;
            height: 400px;
        }
        .fill {
            object-fit: fill;
        }
        .contain {
            object-fit: contain;
        }
        .scale-down {
            object-fit: scale-down;
        }
        .none {
            object-fit: none;
        }
        .cover {
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div>
        <h2>origin 400X300</h2>
        <img id="origin" src="https://www.w3schools.com/css/paris.jpg" alt="Paris" width="400" height="300">
    </div>
    <div>
        <h2>200X400</h2>
        <img class="img200X400" src="https://www.w3schools.com/css/paris.jpg" alt="Paris">
    </div>
    <div>
        <h2>200X400 fill</h2>
        <img class="img200X400 fill" src="https://www.w3schools.com/css/paris.jpg" alt="Paris">
    </div>
    <div>
        <h2>200X400 contain</h2>
        <img class="img200X400 contain" src="https://www.w3schools.com/css/paris.jpg" alt="Paris">
    </div>
    <div>
        <h2>200X400 scale-down</h2>
        <img class="img200X400 scale-down" src="https://www.w3schools.com/css/paris.jpg" alt="Paris">
    </div>
    <div>
        <h2>200X400 none</h2>
        <img class="img200X400 none" src="https://www.w3schools.com/css/paris.jpg" alt="Paris">
    </div>
    <div>
        <h2>200X400 cover</h2>
        <img class="img200X400 cover" src="https://www.w3schools.com/css/paris.jpg" alt="Paris">
    </div>
</body>
</html>

 

參考資料：

CSS The object-fit Property