1

您好，我对此很陌生，我正在尝试弄清楚如何缩放和剪辑这些图像以适合每个网格正方形而没有边框...

我也不知道这是否是设置图像的有效方法。我想为每个方块制作一个不同的图像，但是现在它是如何设置的，我必须为每个方块制作一个新图像.box .inner#。如果有更好的方法来构建它，那将非常有帮助。

.grid {
  margin: 0 auto;
  width: 240vw;
  max-width: 200vh;
  height: 240vw;
  max-height: 200vh;
  font-size: 2rem;
}

.row {
  display: flex;
}

.box {
  background: red;
  margin: 5px;
  color: white;
  font-weight: bold;
  flex: 1 0 auto;
  position: relative;
}

.box:after {
  content: "";
  float: left;
  display: block;
  padding-top: 100%;
}

.box .inner1 {
  background-image: url("https://c1.staticflickr.com/2/1763/29556413048_164120ccb5_b.jpg");
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0px 0px 8px rgb(36, 36, 36), 0px 0px 20px rgba(0, 0, 0, 0.9);
}

.box .inner2 {
  background-image: url("https://c1.staticflickr.com/1/922/43509246041_043aff0334_h.jpg");
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0px 0px 8px rgb(36, 36, 36), 0px 0px 20px rgba(0, 0, 0, 0.9);
}
<div class="grid">
  <div class="row">
    <div class="box">
      <div class="inner1">1</div>
    </div>
    <div class="box">
      <div class="inner1">2</div>
    </div>
    <div class="box">
      <div class="inner1">3</div>
    </div>
    <div class="box">
      <div class="inner1">4</div>
    </div>
  </div>
  <div class="row">
    <div class="box">
      <div class="inner2">5</div>
    </div>
    <div class="box">
      <div class="inner2">6</div>
    </div>
    <div class="box">
      <div class="inner2">7</div>
    </div>
    <div class="box">
      <div class="inner2">8</div>
    </div>
  </div>
</div>

4

2 回答 2

1

你可以这样做：

.grid {
  margin: 0 auto;
  width: 240vw;
  max-width: 200vh;
  height: 240vw;
  max-height: 200vh;
  font-size: 2rem;
}

.row {
  display: flex;
}

.box {
  background: red;
  margin: 5px;
  color: white;
  font-weight: bold;
  flex: 1 0 auto;
  position: relative;
}

.box:after {
  content: "";
  float: left;
  display: block;
  padding-top: 100%;
}

.box > div {
  background-size:cover;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0px 0px 8px rgb(36, 36, 36), 0px 0px 20px rgba(0, 0, 0, 0.9);
}

.inner1 {
background-image: url("https://c1.staticflickr.com/2/1763/29556413048_164120ccb5_b.jpg");
}
.inner2 {
  background-image: url("https://c1.staticflickr.com/1/922/43509246041_043aff0334_h.jpg");
}
.inner3 {
  background-image: url("https://picsum.photos/200/200?3");
}
.inner4 {
  background-image: url("https://picsum.photos/200/200?4");
}
.inner5 {
  background-image: url("https://picsum.photos/200/300?5");
}
.inner6 {
  background-image: url("https://picsum.photos/200/300?6");
}
.inner7 {
  background-image: url("https://picsum.photos/200/200?7");
}
.inner8 {
  background-image: url("https://picsum.photos/200/300?8");
}
<div class="grid">
  <div class="row">
    <div class="box">
      <div class="inner1">1</div>
    </div>
    <div class="box">
      <div class="inner2">2</div>
    </div>
    <div class="box">
      <div class="inner3">3</div>
    </div>
    <div class="box">
      <div class="inner4">4</div>
    </div>
  </div>
  <div class="row">
    <div class="box">
      <div class="inner5">5</div>
    </div>
    <div class="box">
      <div class="inner6">6</div>
    </div>
    <div class="box">
      <div class="inner7">7</div>
    </div>
    <div class="box">
      <div class="inner8">8</div>
    </div>
  </div>
</div>

于 2018-07-27T16:36:51.077 回答
0

我不完全确定这是否会解决您的问题，但可能会在您的 css 文件中的 .box 类中取消边距。 还没有足够的声誉所以点击这个链接

与其让您的边距为 5 像素，不如将其更改为 0 像素，看看是否有帮助。

至于不同的图像，您只需要为每个图像创建一个新类，并将一个新图像链接到该类，返回并像前两个一样将其链接起来。

于 2018-07-27T16:38:25.613 回答