SOURCE

<div class="outer">
	<div class="inner1"></div>
	<div class="inner2">
		<div class="test">
            <!-- <div class="test2"></div> -->
                <img src="https://t7.baidu.com/it/u=3616242789,1098670747&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1604121351&t=2c0207a43365930983d64a47eb4817cf">
            <!-- </div> -->
			</div>
	</div>
</div>

.outer {
    width: 500px;
    height: 500px;
    outline: 1px solid;
    display: flex;
    flex-direction: column;
}
.inner1 {
    flex: none;
    height: 200px;
}
.inner2 {
    flex: auto;
    overflow:  hidden;
    /* height: 300px; */
}
.test {
    height: 100%;
    background: green;
}
.test2 {
    width: 100%;
    height: 100%;
    background: red;
}
img {
    /* display: block; */
    height: 100%;
    width: 100%;
    object-fit: contain;
}