CSS: "Bleeding edge" 设计。如何？

Question

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

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

    &.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。随着您调整 window up/down 的大小，或多或少的屏幕截图将会显示。

.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>

CSS: "Bleeding edge" 设计。如何？

CSS: "Bleeding edge" design. How?

html

css

jquery

responsive