CSS：“前沿”设计。如何？ [关闭]

Question

我希望重新创建一个类似于 Fantastical 网站 (https://flexibits.com/fantastical) 的设计，其中屏幕截图的边缘会溢出页面边界，并且当用户调整窗口大小时，会显示更多屏幕截图。此外，当宽度真的很窄时，屏幕截图也会缩小。以下是一些视觉效果来说明我的糟糕描述：

这是我最终得到的代码，希望对其他人有所帮助：

    &.accounts {
      display: block;
      margin: 0 auto;
      height: auto;

      .text {
        width: auto;
        padding: 0;
        text-align: center;
      }

      .image {
        width: auto;
        height: 300px;
        background-image: url('/assets/scrn-accounts.png');
        background-repeat: no-repeat;
        background-position: 100px 0;
        background-size: cover;
        margin: 20px 0;
      }

    }

Answer 1

要实现类似于您提供的屏幕截图的效果，您可以创建一个简单的两列网格，并在右列中为您的屏幕截图提供background-image。当您向上/向下调整窗口大小时，将显示或多或少的屏幕截图。

.grid {
  display: flex;
  max-width: 1024px;
  margin: 0 auto;
}
.grid-item {
  width: 50%;
}
.text {
  padding: 40px 10px;
}
.image {
  background-image: url('http://placekitten.com/800/400');
  background-size: cover;
  margin: 20px 0;
}

<div class="grid">
  <div class="grid-item text">
    <h1>Content goes here</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis lectus sed risus auctor pellentesque. Proin sed purus velit. Vivamus vehicula bibendum mi euismod ornare. Proin non lacus varius lorem tempor ullamcorper at eu eros. Quisque ullamcorper dui id sodales interdum. Curabitur rhoncus, erat et sollicitudin auctor, odio nibh lacinia dui, eu tincidunt tellus turpis fringilla ipsum. Aliquam consectetur augue malesuada dolor viverra tempor. Suspendisse ornare. </p>
  </div>
  <div class="grid-item image">
  </div>
</div>