Все мои поиски говорят мне сделать img {max-height: 100%}, но это, похоже, не имеет никакого эффекта. Я не понимаю, если я установил высоту родительского контейнера (earth-block), почему установка высоты img не ограничит изображение этим размером. введите описание изображения здесь
img {max-height: 100%}
earth-block
.earth-block { height: 200px; } .earth-block img{ max-height: 100%; }
<div class="earth"> <div class="wrapper"> <div class="earth-block"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZj1KyXPz468xvFWikAXA-dPkMu14q-XuB3dKKl9LF6Bl4SO-oTw&s" alt="earth"></div> </div> </div>
это поможет вам
<!DOCTYPE html> <html> <head> <title>Page Title</title> <style> .earth-block { height: 200px; background-color: aliceblue; display: flex; } .earth-block img{ flex-grow: 100; object-fit: none; object-position: center; } </style> </head> <body> <div class="earth"> <div class="wrapper"> <div class="earth-block"><img src="https://cdn.pixabay.com/photo/2016/10/20/18/35/sunrise-1756274__340.jpg" alt="earth"></div> </div> </div> </body> </html>