How to style a div to be a responsive square

Question

I want my div to adapt its height to always equal its width  The width is percental  When the parent s width decreases  the box should decrease by keeping its aspect ratio   How to do this is CSS

User · Accepted Answer

To achieve what you are looking for you can use the viewport-percentage length vw.

Here is a quick example I made on jsfiddle.

HTML:

<div class="square">
    <h1>This is a Square</h1>
</div>

CSS:

.square {
    background: #000;
    width: 50vw;
    height: 50vw;
}
.square h1 {
    color: #fff;
}

I am sure there are many other ways to do this but this way seemed the best to me.

User · Answer

HTML   lt div class  square-box  gt       lt div class  square-content  gt           lt h3 gt test lt  h3 gt       lt  div gt   lt  div gt    CSS   square-box      position  relative      width  50       overflow  hidden      background   4679BD     square-box before      content          display  block      padding-top  100      square-content      position   absolute      top  0      left  0      bottom  0      right  0      color  white      text-align  center      http   jsfiddle net 38Tnx 1425

User · Answer

This is what I came up with  Here is a fiddle   First  I need three wrapper elements for both a square shape and centered text    lt div gt  lt div gt  lt div gt Lorem ipsum dolor sit amet  consectetuer adipiscing elit  sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat  lt  div gt  lt  div gt  lt  div gt    This is the stylecheet  It makes use of two techniques  one for square shapes and one for centered text   body  gt  div       position relative      height 0      width 50   padding-bottom 50      body  gt  div  gt  div       position absolute  top 0      height 100   width 100       display table      border 1px solid  000      margin 1em     body  gt  div  gt  div  gt  div      display table-cell      vertical-align middle  text-align center      padding 1em

User · Answer

Works on almost all browsers   You can try giving padding-bottom as a percentage    lt div style  height 0 width 20  padding-bottom 20  background-color red  gt   lt div gt  Content goes here  lt  div gt   lt  div gt    The outer div is making a square and inner div contains the content  This solution worked for me many times   Here s a jsfiddle

User · Answer

Another way is to use a transparent 1x1 png with width  100   height  auto in a div and absolutely positioned content within it   html    lt div gt       lt img src  1x1px png  gt       lt h1 gt FOO lt  h1 gt   lt  div gt    css   div       position  relative      width  50      img       width  100       height  auto     h1       position  absolute      top  10px      left  10px      Fidle  http   jsfiddle net t529bjwc

User · Answer

It is as easy as specifying a padding bottom the same size as the width in percent  So if you have a width of 50   just use this example below   id or class      width  50       padding-bottom  50       Here is a jsfiddle http   jsfiddle net kJL3u 2   Edited version with responsive text  http   jsfiddle net kJL3u 394

[css] How to style a div to be a responsive square?

Examples related to css

Examples related to layout

Examples related to responsive-design

Examples related to aspect-ratio