Webwide is the inclusive discussion community for web designers, developers & makers.

Whether you're an enthusiast, in training, or a seasoned pro – you'll fit right in at Webwide. Creating an account is fast, easy and completely free so you can start participating right away.

Read our Code of Conduct

Free Membership Benefits

  • Participate in hundreds of interesting discussions
  • Network with industry peers and make new connections
  • Show off your own projects and relevant content
  • Get help and feedback for your coding and designs
  • Buy and sell services and resources in the marketplace
  • Participate in our friendly community challenges
  • Earn trophies and work your way up our leaderboards
  • Enjoy exclusive Webwide member discounts and offers
  • ...and so much more!

Neat way to set height of empty div to the width of its fluid-width container :)

ek1

Member
Joined
Oct 6, 2019
Messages
70
Reaction score
75
Points
275
Location
Halifax
Local Time
Today, 18:29
Website
erinknowles.com
Pronouns
She/her
height: 100%; wasn't working for me so I fiddled around for a bit and came across a solution that I've never seen before!

Code:
.square {
   width: 100%;
   height: auto;
   padding: 50% 50%;
   box-sizing: border-box;
}
And if you set width to 60% and padding to 30% 30% for example that works too!

Just thought I'd share as I haven't seen hit around before and it worked perfectly for me!
 
Last edited:

Gummibeer

Well-known member
Joined
Oct 5, 2019
Messages
664
Reaction score
518
Points
635
Age
26
Location
Hamburg, Germany
Local Time
Today, 22:29
Website
gummibeer.de
Where on earth does that number come from! 😆
Simple percentage calculation. 😉
100/21*9

I use it quite common to have images in a large size but not covering the whole 16*9 screen.

The trick works the same for 16*9, 4*3, 1*1 or whatever aspect ratio you want to use.
 
Last edited:
  • Like
Reactions: Adam

VoidlessSeven7

New member
Joined
Nov 20, 2019
Messages
4
Reaction score
0
Points
3
Location
Spain
Local Time
Today, 22:29
Website
akbal.dev
height: 100%; wasn't working for me so I fiddled around for a bit and came across a solution that I've never seen before!

Code:
.square {
   width: 100%;
   height: auto;
   padding: 50% 50%;
   box-sizing: border-box;
}
And if you set width to 60% and padding to 30% 30% for example that works too!

Just thought I'd share as I haven't seen hit around before and it worked perfectly for me!
Do you mind showing a codepen with the solution applied? Cause I don't fully get what you're trying to accomplish
 

Adam

Mr. Webwide
Administrator
Joined
Sep 24, 2019
Messages
622
Reaction score
581
Points
665
Location
United Kingdom
Local Time
Today, 21:29
Pronouns
he/him
height: 100%; wasn't working for me so I fiddled around for a bit and came across a solution that I've never seen before!

Code:
.square {
   width: 100%;
   height: auto;
   padding: 50% 50%;
   box-sizing: border-box;
}
And if you set width to 60% and padding to 30% 30% for example that works too!

Just thought I'd share as I haven't seen hit around before and it worked perfectly for me!
Used this today, thank you for sharing! Was great for responsive thumbnail images.
 
  • Love
Reactions: ek1