Question

我有一个left-block部门。该左侧的块中还有7个块。如何正确对齐图像。显示整个图片而不是其中的一部分。

我尝试了很多方法，但是我不知道该怎么做。我尚未找到如何对齐图像。

* {
  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>

我只希望左侧块内的所有7个块宽均为50，以便正确显示图像。我的意思是在malenka块中放置了大图像。但是，请提前感谢您的帮助。

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;
}

Answer 2

尝试一下。

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

Answer 3

嗯，我认为我不完全理解您的问题，但是我尝试回答。

您有3个街区，分别位于左，中和右div处，好。您想将7张图片放置在左侧块中，但是当您尝试放置一张大图片时，该退出左侧的div？您的图片尺寸是多少？如果它们太大（例如超过50x50），那么如果您不专门针对div并缩放它们，它们将无法适应div。

此代码IMO唯一的解决方案是使用：

background-size：cover;
背景位置：中心。

这两个规则试图使背景图片尽可能地适合div。

如果我误会了，告诉我！

Answer 4

尝试一下。希望它对您有用。据我了解，您希望正确显示左侧块中的所有7张图像。

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            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;
        }

        .img {
            display: block;
            height: 50px;
            width: 50px;
            margin: 8px;
            cursor: pointer;
            border: 2px solid black;
        }
    </style>
</head>

<body>
    <div class="left-block">
        <img src="https://www.w3schools.com/html/pic_trulli.jpg" class="img">
        <img src="https://www.w3schools.com/html/pic_trulli.jpg" class="img">
        <img src="https://www.w3schools.com/html/pic_trulli.jpg" class="img">
        <img src="https://www.w3schools.com/html/pic_trulli.jpg" class="img">
        <img src="https://www.w3schools.com/html/pic_trulli.jpg" class="img">
        <img src="https://www.w3schools.com/html/pic_trulli.jpg" class="img">
        <img src="https://www.w3schools.com/html/pic_trulli.jpg" class="img">

    </div>
    <div class="middle-block"></div>
    <div class="right-block"></div>
</body>

正确对齐图像

4 个答案: