CSS：“出血边缘”设计。怎么样？

Question

我希望重新创建一个类似Fantastical网站（bind）的设计，在该设计中，屏幕截图的边缘会渗出页面边界，并且当用户调整窗口大小时，会显示更多屏幕截图。此外，当宽度真的很窄时，屏幕截图也会缩小。以下是一些视觉效果来说明我的描述欠佳：

https://flexibits.com/fantastical

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

r

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>