I wan to change width of my image if the height of it's container changes-CodePudding

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

@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;
}

<div >
  <p > text </ <div >
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" id="img1">
</div>
<p > text </p>
</div>

CodePudding user response：

Don't set the height and width explicitly if you want this behaviour, you can simply set max-width and max-height of your image to 100% to achieve this behaviour.

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

    <div >
    <p > text </
    <div >
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" id="img1">
    </div>
    <p > text </p>
    </div>