Can't fit image into div

1

How can I resize my img to fit into this div?

<div class="earth">
            <div class="wrapper">
<div class="earth-block"><img src="images/earth.jpg" alt="earth"></div>
            </div>
        </div>

.earth-block {
    height: 200px;
}

.earth-block img{
    max-width: 100%;
    max-height: 100%;
}
2

.earth-block img{max-width: 100%;max-height: 100%;} → Your image size depends on the .earth-block {height: 200px;} . It already fits.

3

@Ocasek But half of it is cut off. It appears like this: Screenshot 2020-04-19 13.15.56

4

Try to do something like this ↓↓↓
codepen. io/Janos/pen/mdeEYaL

<div class="earth">
  <div class="wrapper">
    <div class="earth-block">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/599px-The_Earth_seen_from_Apollo_17.jpg" alt="earth">    </div>
  </div>
</div>


.wrapper {
    width: 520px;
}

.earth-block {
    background-color: lightblue;
    height: 200px;
    text-align: center;
}

.earth-block img{
    max-width: 100%;
    max-height: 100%;
}
1 Like
5

Thanks. That didn’t work either…

6

maybe sent here a link to your project?

1 Like
7

Thanks I’m working on it locally so it’s not in Codepen or anything like that, so I’m not sure how to share (the image is on my computer)… I’ll figure it out