适合的对象：覆盖；我设置为主视觉不起作用

Question

先决条件

适合的对象：覆盖；我设置为主视觉无效！

这是网站制作中的屏幕截图。

预期值

我想将主视觉效果设置为下面 link 中的效果。 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>

适合的对象：覆盖；我设置为主视觉不起作用

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

html

css

sass

object-fit

先决条件

预期值

复制程序