html - 将单个图像缩放成网格正方形？

Question

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

我也不知道这是否是设置图像的有效方法。我想为每个方块制作一个不同的图像，但是现在它是如何设置的，我必须为每个方块制作一个新图像.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>

标签： htmlcss

Answer 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>