CODEWITHSUNDEEP
htmlcss
Schedule
Schedule

Reputation: 13

Align the images correctly

I have a left-block div. There are 7 more blocks in this left block. How can I properly align the images. to show the whole picture and not part of it.

I have tried many methods, but I do not know how to do this. I have not found how to align the images.

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

I just want all 7 blocks inside the left block that are 50 wide so that the image is displayed correctly. I mean that a large image is placed in the malenka blocks. However, thanks in advance for your help.

Upvotes: 0

Views: 89

Answers (4)

Shilpa Lalwani
Shilpa Lalwani

Reputation: 41

Try this. Hope it works for you , As far as I understand you want all the 7 images in left block displayed correctly.

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

Upvotes: 0

Rajendra Singh
Rajendra Singh

Reputation: 464

your main.css should be like this try this

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

Upvotes: 1

artas
artas

Reputation: 148

Mmmm, I don't think I fully understood your question, but i try to answer.

You have 3 block, placed near, left middle and right div, ok. You want to put 7 image in the left block, but when you try to put a big image this exit from the left div? what are the dimension of your image? if they are too big, more than 50x50 for example, they can't fit the div if you don't specific to and scale them.

the only solution, whit this code IMO, is to use:

  • background-size:cover;
  • background-position:center.

this two rules try to fit the best as possible your background-image to the div.

Tell me if i misunderstood!

Upvotes: 0

Talha Abbas
Talha Abbas

Reputation: 21

try this.. 

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

Upvotes: 0

Related Questions