From d1cad299cab0c1f1c8ebf9ae096a90afe4c43088 Mon Sep 17 00:00:00 2001
From: Shashank <shanksmgr1@gmail.com>
Date: Thu, 8 Oct 2015 23:52:07 +0530
Subject: [PATCH] Updated with demo

More precise code with demo
---
 README.md | 41 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 70e0c495..e0ffa151 100644
--- a/README.md
+++ b/README.md
@@ -14,6 +14,7 @@ A collection of tips to help take your CSS skills pro.
 1. [Equal Width Table Cells](#equal-width-table-cells)
 1. [Get Rid of Margin Hacks With Flexbox](#get-rid-of-margin-hacks-with-flexbox)
 1. [Use Attribute Selectors with Empty Links](#use-attribute-selectors-with-empty-links)
+1. [Use padding-top trick to maintain aspect-ratio](#use-padding-top-trick)
 
 
 ### Use `:not()` to Apply/Unapply Borders on Navigation
@@ -230,7 +231,45 @@ a[href^="http"]:empty::before {
 
 That's pretty convenient.
 
+### Use `padding-top` Trick
+
+```css
+/*some value based on responsive need.*/
+
+.container {
+    width: 20%;
+}
+/*a content wrapper.*/
+
+.container > div {
+    width: 100%;
+    height: 0;
+    position: relative;
+}
+/*padding-top is relative to width of the parent container that is the trick 
+* here the aspect ratio is 1:1 a square box.
+*/
+
+.container > div:before {
+    padding-top: 100%;
+    width: 100%;
+    background: #009530;
+    border-radius: 8px;
+    content: ' ';
+    position: absolute;
+    top: 0;
+}
+.container .content {
+    position: absolute;
+    font-size: 2em;
+    color: blue;
+}
+
+```
+
+CodePen [Demo](http://codepen.io/shanksrepo/pen/OygmNB)
+
 
 ### Support
 
-These protips work in current versions of Chrome, Firefox, Safari, and Edge, and in IE11.
\ No newline at end of file
+These protips work in current versions of Chrome, Firefox, Safari, and Edge, and in IE11.