CSS: object-fit

11 April 2020, 7:20 pm by antelove

CSS: object-fit

CSS: object-fit



Happy Coding


index.html

/* ------------------------------------------------------------ */
/*  CSS object-fit                                              */
/*                                                              */
/*  Author: antelove                                            */
/*  Website: antelove.com                                       */
/* ------------------------------------------------------------ */

<!DOCTYPE html>
<html>

    <head>

        <title>CSS object-fit</title>

        <style>

            img {
                width: 200px;
                height: 400px;
                border: 1px solid red;
            }

            .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>The object-fit Property</h1>

        <h2>No object-fit:</h2>
        <img src="https://antelove.com/uploads/images/thumb/1585895398.jpg" alt="1" />

        <h2>object-fit: fill (this is default):</h2>
        <img class="fill" src="https://antelove.com/uploads/images/thumb/1585895398.jpg" alt="2" />

        <h2>object-fit: contain:</h2>
        <img class="contain" src="https://antelove.com/uploads/images/thumb/1585895398.jpg" alt="3" />

        <h2>object-fit: cover:</h2>
        <img class="cover" src="https://antelove.com/uploads/images/thumb/1585895398.jpg" alt="4" />

        <h2>object-fit: scale-down:</h2>
        <img class="scale-down" src="https://antelove.com/uploads/images/thumb/1585895398.jpg" alt="5" />

        <h2>object-fit: none:</h2>
        <img class="none" src="https://antelove.com/uploads/images/thumb/1585895398.jpg" alt="6" />

    </body>

</html>

Thank for reading :)


Keywords:


No Action Title
1 codepen: full page
2 codepen: debug mode
0 comment