css - (基础)带有背景图像的网格单元格突破

Question

我正在为我的网格系统使用基础，但这在任何网格系统中都可能是一个问题。我基本上用一个容器包裹了 3 个单元格，但其中一个单元格应该长到页面边框(留在我的 Sampe-Image 中)但这也可能在右侧)。

当我像这个 fiddle 一样定义固定宽度时，它可以工作，但是背景图像太宽了，我需要一个响应式版本:-/

HTML:

<div class="grid-container">
  <div class="grid-x grid-margin-x">
    <div class="large-4 cell">
     <div class="specialdiv"></div>
    </div>
    <div class="large-4 cell">
      <p>test</p>
    </div>
    <div class="large-4 cell">
      <p>test</p>
    </div>
  </div> 
</div>

CSS:

.specialdiv {
    position: relative;
    border: 1px solid red;
    height: 100%;
}
.specialdiv:after {
        content: "";
        display: block;
        top: 0;
        right: 0;
        height: 100%;
        position: absolute;
        width: 2000px;
        background: url("https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg");
        background-size: cover;
    }

https://codepen.io/anon/pen/ZjeBOz

有什么提示吗？

Answer 1

我不确定你到底想要什么，但如果目标是将图像保留在单元格中而不考虑裁剪，你可以应用 overflow-x: hidden;到.specialdiv