html - 正确对齐图像

Question

我有一个 left-block div。这个左边的方 block 还有 7 个方 block 。如何正确对齐图像。显示整个图片而不是其中的一部分。

我试过很多方法，但我不知道该怎么做。我还没有找到如何对齐图像。

* {
  margin: 0px;
  padding: 0px;
}

body {
  background: white;
}

.left-block {
  background: purple;
  width: 80px;
  height: 500px;
  float: left;
}

.middle-block {
  background: #444;
  width: 400px;
  height: 500px;
  float: left;
}

.right-block {
  background: rgb(120, 120, 190);
  width: 300px;
  height: 500px;
  float: left;
}

.img1 {
  background-image: url("http://placehold.it/50x50");
  height: 50px;
  width: 50px;
  margin: 8px;
  cursor: pointer;
  border: 2px solid black;
}

.img2 {
  background-image: url("http://placehold.it/50x50");
  height: 50px;
  width: 50px;
  margin: 8px;
  cursor: pointer;
  border: 2px solid black;
}

.img3 {
  background-image: url("http://placehold.it/50x50");
  height: 50px;
  width: 50px;
  margin: 8px;
  cursor: pointer;
  border: 2px solid black;
}

.img4 {
  background-image: url("http://placehold.it/50x50");
  height: 50px;
  width: 50px;
  margin: 8px;
  cursor: pointer;
  border: 2px solid black;
}

.img5 {
  background-image: url("http://placehold.it/50x50");
  height: 50px;
  width: 50px;
  margin: 8px;
  cursor: pointer;
  border: 2px solid black;
}

.img6 {
  background-image: url("http://placehold.it/50x50");
  height: 50px;
  width: 50px;
  margin: 8px;
  cursor: pointer;
  border: 2px solid black;
}

.img7 {
  background-image: url("http://placehold.it/50x50");
  height: 50px;
  width: 50px;
  margin: 8px;
  cursor: pointer;
  border: 2px solid black;
}

<div class="left-block">
  <div class="img1"></div>
  <div class="img2"></div>
  <div class="img3"></div>
  <div class="img4"></div>
  <div class="img5"></div>
  <div class="img6"></div>
  <div class="img7"></div>
</div>
<div class="middle-block"></div>
<div class="right-block"></div>

我只想要左侧 block 内的所有 7 个 block 都是 50 宽，以便正确显示图像。我的意思是在 malenka block 中放置了一个大图像。不过，在此先感谢您的帮助。

Answer 1

你的 main.css 应该是这样的 试试这个

* {
    margin: 0px;
    padding: 0px;
}

body {
    background: white;
}

.left-block {
    background: purple;
    width: 80px;
    height: 500px;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.middle-block {
    background: #444;
    width: 400px;
    height: 500px;
    float: left;
}

.right-block {
    background: rgb(120, 120, 190);
    width: 300px;
    height: 500px;
    float: left;
}

.img1 {
    background-image: url("img/a1.png");
    height: 100%;
    width: 100%;
    cursor: pointer;
    background-size:cover;
}

.img2 {
    background-image: url("img/a2.png");
    height: 100%;
    width: 100%;
    cursor: pointer;
    background-size:cover;
}

.img3 {
    background-image: url("img/a3.png");
    height: 100%;
    width: 100%;
    cursor: pointer;
    background-size:cover;
}

.img4 {
    background-image: url("img/a4.png");
    height: 100%;
    width: 100%;
    cursor: pointer;
    background-size:cover;
}

.img5 {
    background-image: url("img/a5.png");
    height: 100%;
    width: 100%;
    cursor: pointer;
    background-size:cover;
}

.img6 {
    background-image: url("img/a6.png");
    height: 100%;
    width: 100%;
    background-size:cover;
    cursor: pointer;

}

.img7 {
    background-image: url("img/a7.png");
    height: 100%;
    width: 100%;
    cursor: pointer;
    background-size:cover;
}