jQuery addClass example

Change class name on click in jQuery

by joshmoto

HTML

<div class="ratio">

  <div class="div">
    
    
    
  </div>
  
</div>

SCSS

$div-width : 400;
 $div-height : 200;
 
 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: 200vh) {
    width: 100vw;
    height: 50vw;
    
  }

  @media screen and (min-width: 200vh) {
    width: 200vh;
    height: 100vh;

  }

}

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