1

I'm trying to figure out the proportional image height using the calc function in Css. I tried in several ways, unfortunately to no avail. Do you have any idea?

.wrap{
  width:500px;
  margin:0 auto;
  overflow:hidden; 
}

.panel{
  width:100%;
}
.image{
  float:left;
  width:40%;
  height:calc(width / 0.2);
  /* not work
  height:calc(100% / 0.2);
  height:calc(100% / 0.02 );
  height:calc(100% / 2);
  
  */
  background-color:#eee;
  background-repeat:no-repeat;
  background-size:cover;
}

.content{
  float:left;
  color:#000;
  font-weight:bold;
}
<div class="wrap">
  <div class="panel">
      <div class="image" style="background-image:url(https://iv.pl/images/35176551489174265644.jpg);"></div>
      <div class="content">
          hello
      </div>
  </div>
</div>
Wojciech Urbaniak
  • 47
  • 6
  • you want to keep ratio ? – Temani Afif Mar 09 '18 at 18:59
  • If you want an element to have a fixed height to width ratio, use a height of 0 and a padding-bottom in %. See [this question](https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css), [this question](https://stackoverflow.com/q/19267292/1016716) etc. – Mr Lister Mar 09 '18 at 19:46

0 Answers0