I wan to change width of my image if the height of it’s container changes

i want to change the width of my image from 525px to 508px if the height of ccontainer which is a div exceeds 530px, and i want to do this using css.

this is what i’ve come up with so far

CSS.

@media (min-height: 5px) { .ccontainer > div img {width: 525;}}
@media (max-height: 5px) { .ccontainer > div img {width: 508;}}
#img1 {
display: block;
margin: auto;
object-fit: cover;
}
#img {
max-height: 670px;
width: 525px;
overflow-x: auto;
}

HTML.

<div class=”ccontainer”>
<p class=”text”> text </
<div class=”img”>
<img src=”imagesimage2.jpg” id=”img1″>
</div>
<p class=”text”> text </p>
</div>