拉伸图像网格

时间:2017-12-18 02:32:56

标签: html css css3 flexbox

我正在尝试使用图像网格创建一小部分页面。我想知道是否有办法使得无论屏幕大小如何,最左侧和右侧的图像都可以始终粘在容器的边缘。

我使用flexbox创建了一个网格,通过创建一个数字网格并使它们内联并制作容器,.grid,75vw。

我该怎么做?这是网站:https://1080benchmarks.github.io/projects/portfolio/pages/webdesign.html

这是代码

    .contentcontainer {
    width: 100vw;
    display: flex;
    justify-content: center;
}

    .content {
  width: 75vw;
}

p {
  font-family: 'Libre Baskerville', serif;
  font-size: 1.5rem;
  padding-top: .5rem;
}

.grid {
  width: 75vw;
  display: flex;
  justify-content: center;
  flex-flow: wrap;
  margin-top: 5rem;
}

.gridimage {
  height: 220px;
  width: auto;
  border-radius: 1em;
  margin-left: 1rem;
  margin-right: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  box-shadow: 1px 0px 3px rgba(0,0,0,0.25);
  transition: all .5s ease-in-out;
  filter: grayscale(100%);
}

0 个答案:

没有答案