CSS - scale down child elements automotically when use absolute position

Question

Its handy for child element that uses absolute position for positioning within parent <div> which has background image. Use position: absolute, and percentage height and width (instead of typical exact pixel), to avoid major breakpoints implementation, which what px lack at. 

<div class="parent-with-background-image">
  <div class="child-with-absolute-position"></div>
</div>

<style>
  .child-with-absolute-position {
    position: absolute;
    background: transparent;
    width: 50%;
    @media (min-width: 1024px) {
      height: 284px;
    }
    height: 9%;
    margin-top: 52%;
    margin-left: 46%; 
    &:hover {
      background: rgba(255, 255, 255, 0.5);
    }
  }
</style>