html - 适合对象：封面；我设置为主视觉不起作用

Question

先决条件

适合对象：封面；我设置为主视觉不起作用！

这是生产中网站的屏幕截图。

期望值

我想将主视觉设置为如下链接中的外观。 https://code-step.com/demo/html/profile/

繁殖程序

请运行下面的代码。

<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

这是一个纯 CSS 的解决方案。您可以将这些样式用作像当前结构一样的内联图像。或者，您可以将其用作background-image我的建议。我个人更喜欢较少的标记。这使您可以轻松自定义，并允许您在需要时轻松地将其他元素放在顶部。

一旦声明了 div 或图像的大小（取自网站的大小），您就可以在 CSS 中将图像设置为背景。然后，为了让自行车在这个狭窄的宽度和高度上实际显示得很好，你可以使用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>