Container
<div class='box'> <div class='content'>Aspect ratio of 1:1</div> </div>
CSS
.box { position: relative; width: 50%; /* desired width */ } .box:before { content: ""; display: block; padding-top: 100%; /* initial ratio of 1:1*/ } .content { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } /* Other ratios - just apply the desired class to the "box" element */ .ratio2_1:before{ padding-top: 50%; } .ratio1_2:before{ padding-top: 200%; } .ratio4_3:before{ padding-top: 75%; } .ratio16_9:before{ padding-top: 56.25%; }
What are particle animations? Particle network animations in JavaScript typically involve creating visual representations of… Read More
BOOKING SOLUTIONS 202x This is my take on a subset of booking, appointment, PMS or… Read More
THE GOAL Create a system cron for WordPress, that is accessible and can be easily… Read More
2024, what's cooking? Slowly getting into the 2024 spirit. 3 projects coming to a close… Read More
Short look back at 2023 This has been a busy and interesting year. I am… Read More
Elementor Pro provides grid containers as an experimental feature. The options provided are limited, when… Read More