Html 正确对齐图像_Html_Css - Fatal编程技术网

Html 正确对齐图像

html css

Html 正确对齐图像,html,css,Html,Css,我有一个左街区分区。在这个左街区还有7个街区。如何正确对齐图像。展示整个画面，而不是其中的一部分我试过很多方法，但我不知道怎么做。我还没有找到如何对齐图像 * { 边际：0px；填充：0px； } 身体{ 背景：白色； } .左座{ 背景：紫色；宽度：80px；高度：500px；浮动：左； } 1.中座{ 背景：444人；宽度：400px；高度：500px；浮动：左； } 1.右座{ 背景：rgb120、120、190；宽度：300px；高度：500px；浮动：左； }

我有一个左街区分区。在这个左街区还有7个街区。如何正确对齐图像。展示整个画面，而不是其中的一部分

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

* { 边际：0px；填充：0px； } 身体{ 背景：白色； } .左座{ 背景：紫色；宽度：80px；高度：500px；浮动：左； } 1.中座{ 背景：444人；宽度：400px；高度：500px；浮动：左； } 1.右座{ 背景：rgb120、120、190；宽度：300px；高度：500px；浮动：左； } .img1{ 背景图像：urlhttp://placehold.it/50x50; 高度：50px；宽度：50px；利润率：8px；光标：指针；边框：2件纯黑； } .img2{ 背景图像：urlhttp://placehold.it/50x50; 高度：50px；宽度：50px；利润率：8px；光标：指针；边框：2件纯黑； } .img3{ 背景图像：urlhttp://placehold.it/50x50; 高度：50px；宽度：50px；利润率：8px；光标：指针；边框：2件纯黑； } .img4{ 背景图像：urlhttp://placehold.it/50x50; 高度：50px；宽度：50px；利润率：8px；光标：指针；边框：2件纯黑； } .img5{ 背景图像：urlhttp://placehold.it/50x50; 高度：50px；宽度：50px；利润率：8px；光标：指针；边框：2件纯黑； } .img6{ 背景图像：urlhttp://placehold.it/50x50; 高度：50px；宽度：50px；利润率：8px；光标：指针；边框：2件纯黑； } .img7{ 背景图像：urlhttp://placehold.it/50x50; 高度：50px；宽度：50px；利润率：8px；光标：指针；边框：2件纯黑； } 试试这个

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

嗯，我想我还没有完全理解你的问题，但我试着回答

你有3个方块，放在左边中间和右边，好的。你想把7个图像放在左块，但是当你试图把一个大图像放在左分区的这个出口时？你形象的维度是什么？如果它们太大，例如超过50x50，如果您不指定并缩放它们，它们就无法适应div

根据本规范，唯一的解决方案是使用：

背景尺寸：封面；背景位置：中间。这两条规则试图使您的背景图像尽可能适合div

如果我误解了，请告诉我

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

试试这个。希望它为你工作，据我所知，你希望所有的7个图像在左块显示正确

不幸的是，它不起作用。可能我做错了html和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;
}

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