CSS MAGIC

magic.css

/* Responsive Circle */
/* make sure your padding top is the same as your width and make your height auto.  */
.circle {
position: relative;
border-radius: 50%;
width: 100%;
height: auto;
padding-top: 100%;
background: white;
}

/* Responsive Square  */
.square {
  position: relative;
  width: 50%;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
}