<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.center-cropped {
object-fit: cover;
object-position: center;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
Center-cropped image:
<br>
<img class="center-cropped" src="https://images.unsplash.com/photo-1569867037406-6b9ad775b22e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
<br> Normal image:
<br>
<img src="https://images.unsplash.com/photo-1569867037406-6b9ad775b22e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
<br>
</body>
</html>