CSS Image cant fill entire container

Question

I have a problem where my Image wont fill entire height of image container HTML:

<body>
    <div class="card">
        <div class="front-side">
            <img src="img.jpg" alt="Font-Image">
        </div>
    </div>
</body>

CSS:

*,*::after,*::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

body{
    padding: 30px;
  }

.front-side img{
    width: 100%;
  }


.card{
    background-color: red;
    width: 20%;
  }

Result as you can see "card" background has bigger height than image:

score 1 · Accepted Answer · answered May 28 '20 at 11:20

Set the image to be display block

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding: 30px;
}

.front-side img {
  display: block;
  width: 100%;
}

.card {
  background-color: red;
  width: 20%;
}

<body>
  <div class="card">
    <div class="front-side">
      <img src="https://source.unsplash.com/random/400x600" alt="Font-Image">
    </div>
  </div>
</body>

score -1 · Answer 2 · answered May 28 '20 at 11:36

You can use display: flex on the direct parent element of the image (in this case .front-side), and then center it where you would like.

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding: 30px;
}

.front-side img {
  width: 100%;
}


.card {
  background-color: red;
  width: 20%;
}

.front-side {
  display: flex;
  justify-content: left;
}

<body>
    <div class="card">
        <div class="front-side">
            <img src="https://via.placeholder.com/300" alt="Font-Image">
        </div>
    </div>
</body>

CSS Image cant fill entire container

2 Answers2