محرر ويب أونلاين

<!DOCTYPE html>
<html>
	<head>
        <style>
img {
    width: 200px;
    height: 150px;
    display: block;
    border: 1px solid;
}

.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>
        <h2>CSS object-fit property</h2>
        <p>object-fit: fill (Default)</p>
        <img class="fill" src="/tutorials/css/object-fit-and-position/logo.png"/>
        <p>object-fit: contain</p>
        <img class="contain" src="/tutorials/css/object-fit-and-position/logo.png"/>
        <p>object-fit: cover</p>
        <img class="cover" src="/tutorials/css/object-fit-and-position/logo.png"/>
        <p>object-fit: none</p>
        <img class="none" src="/tutorials/css/object-fit-and-position/logo.png"/>
        <p>object-fit: scale-down</p>
        <img class="scale-down" src="/tutorials/css/object-fit-and-position/logo.png"/>
    </body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <style>
img {
    width: 200px;
    height: 150px;
    display: block;
    border: 1px solid;
}
​
.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>
        <h2>CSS object-fit property</h2>
        <p>object-fit: fill (Default)</p>
        <img class="fill" src="/tutorials/css/object-fit-and-position/logo.png"/>
        <p>object-fit: contain</p>
        <img class="contain" src="/tutorials/css/object-fit-and-position/logo.png"/>
        <p>object-fit: cover</p>
        <img class="cover" src="/tutorials/css/object-fit-and-position/logo.png"/>
        <p>object-fit: none</p>
        <img class="none" src="/tutorials/css/object-fit-and-position/logo.png"/>
        <p>object-fit: scale-down</p>
        <img class="scale-down" src="/tutorials/css/object-fit-and-position/logo.png"/>
    </body>
</html>