Align everything to the top when used object-fit: contain; - css

Question

I'm trying make an image occupy entire view area while retaining its aspect ratio.
object-fit: contain; seems to do the trick, except regardless of the window size, the image occupy entire height, pushing everything outside of view area.
.resize img
{
width: 100%;
height: 100%;
object-fit: contain;
object-position: 50% 0;
}
.resize
{
overflow: auto;
resize: both;
border: 2px solid red;
width: 100px; /* inital demo size */
height: 170px; /* inital demo size */
}
<div class="resize">
<span>
<img src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w1024-h683-n-l50-sg-rj">
</span>
<div>myText</div>
</div>
How can I make the image fit into view area (red box), without leaving empty space below it?
Expected Result
Actual Result

Answer 1

span {
text-align: center;
float: left;
width: 100%;
}
.resize img
{
width: inherit;
height: min-content;
object-fit: scale-down;
object-position: 50%;
margin: 0 auto;
position: relative;
max-width: 350px;
max-height: max-content;
}
.resize
{
overflow: auto;
resize: both;
border: 2px solid red;
min-height:250px;
}
<div class="resize" style="width:100px;">
<span>
<img src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w1024-h683-n-l50-sg-rj">
</span>
<div>myText</div>
</div>

Answer 2

Use CSS grid to define two rows, one for the image and the other for the text
.resize img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: 50% 0;
}
.resize {
overflow: auto;
display: grid;
grid-template-rows: minmax(0,1fr) auto;
resize: both;
border: 2px solid red;
}
<div class="resize" style="width:100px;height:170px;">
<img src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w1024-h683-n-l50-sg-rj">
<div>myText</div>
</div>