jQuery addClass example

Change class name on click in jQuery

by joshmoto

HTML

<div class="ratio">

  <div class="div">



  </div>

</div>

SCSS

/* div size vars and div ratio3 */
 $div-width : 400;
 $div-height : 600;
 
 $ratio: $div-width / $div-height;

 
 
 body {
  width: 100%;
  height: 100%;
}

.ratio {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  
  /* set your div max-size here  */
  /* max-width: $div-width + px;
  max-height: $div-height + px; */
  
  @media screen and (max-width: (100 * $ratio) + vh) {
    width: 100vw; // always 100vw to fill
    height: (100 / $ratio) + vw; // 100 / ratio
  }

  @media screen and (min-width: (100 * $ratio) + vh) {
    width: (100 * $ratio) + vh;  //100 * ratio
    height: 100vh; // always 100vh to fill

  }

}

.div {
  width: 100%;
  height: 100%;
  background: red;
  text-align: center;
  
}