0

I want to create a responsive two column element (25% and 75% width), with the height of the element being determined by an image within the left column. My code works, but the height is a few pixels larger than the image - why is that and how can I fix it?

.row {
  display: flex;
}

.s3 {
  flex: 25%;
}

.s9 {
  flex: 75%;
}

img {
  width: 100%;
}
<div class="row">
  <div class="col s3" style="background-color: red;">
    <img src="https://picsum.photos/400/500">
  </div>
  <div class="col s9" style="background-color: green;"></div>
</div>
aseipel
  • 728
  • 7
  • 15

1 Answers1

1

add

.s3{
line-height:0
}

this is work!

adel
  • 3,436
  • 1
  • 7
  • 20