The object-fit: cover; I set as the main visual does not work

Question

Prerequisites

The object-fit: cover; I set as the main visual does not work!

Here is a screenshot of the site in production.

Expected value

I would like to set the main visual to look like the one in the link below. https://code-step.com/demo/html/profile/

Reproduction procedure

Run the code below, please.

<div id="main">
  <div class="main__mainvisual">
    <img class="main__mainvisual-image" src="image/mainvisual (1).jpg" alt="メインビジュアル"> 
  </div>
<div>

#main {
    .main_mainvisual {
        margin-bottom: 80px;
        img {
            width: 100%;
            max-width: 1920px;
            height: 600px;
            object-fit: cover;
        }
    }
}

Answer 1

Here is a solution with pure CSS. You can use these styles as either an inline image like your current structure. OR, you can use it as a background-image which is what I suggest. I personally prefer less markup. This gives you the ease of customization and allows you to easily put other elements on top if need be.

Once you declare the size of your div or image (sizes taken from the website) then you can set the image to the background in CSS. Then, to get the bicycle to actually display nicely in this constricted width and height, you can use background-position: center;

.mainvisual {
    width: 100%;
    background-image: url('https://code-step.com/demo/html/profile/img/mainvisual.jpg');
    max-width: 1920px;
    height: 600px;
    background-position: center;
}

#main {
  display: block;
}

<div id="main">
  <div class="mainvisual"></div>
<div>