Question

我正在为我的网格系统使用基础，但这在任何网格系统中都可能是个问题。我基本上将3个单元格用一个容器包裹起来，但是其中一个单元格应增长到页面边界（在我的Sampe-Image中但这也可以在右侧）。

当我在这种小提琴中定义固定宽度时，它可以工作，但是背景图像太宽，我需要响应式版本：-/

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

（基础）具有背景图像的网格单元突破

1 个答案: