正方形を維持しつつCSSだけでレスポンシブ対応する

以下より参照. stackoverflow.com

.square {
width: 100%;
height: 0;
padding-bottom: 100%;
}

完全に正方形でレスポンシブに可変する.