title: Is it possible to make the height of a DIV match the width of a DIV with Compass or Susy?
body: <p>I am creating a completely fluid design portfolio site that has a design thumbnail gallery page showing a grid of thumbnail tile links which a viewer can click to see the full art work. Since the site is completely fluid, the tile widths only match the tile height 3 times as one switches between the 3 responsive states since the heights are locked in place. </p>
  
  <p><strong><em>How can I make the height match the width of each thumbnail tile?</em></strong></p>
  
  <p>Here is the code:</p>
  
  <pre><code>@import compass
  @import susy
  @import normalize
  
  $total-columns  : 4
  $column-width   : 60px            
  $gutter-width   : 20px           
  $grid-padding   : $gutter-width
  
  $container-style: fluid
  
  $tablet : 9
  $desktop : 14
  
  // Susy-grid-background override to draw out horizontal lines
  =susy-grid-background       
    +grid-background($total-columns, $column-width, $gutter-width, $base-line-height, $gutter-width, $force-fluid: true) 
  
  
  $base-font-size: 18px
  $base-line-height: 30px
  +establish-baseline
  
  ul
    background-color: rgb(111, 50%, 250)
  
  li
    background: rgba(200,50,0,.2)
    text-align: right     
  
  img
    width: 100%
  
  h1
    +adjust-font-size-to(90px)
    +adjust-leading-to(4, 90px)
    +leader(2, 90px)
    background: rgb(0,20,200)
  
  h1#logo
    +adjust-font-size-to(30px)
    +adjust-leading-to(2, 30px)
    +leader(0, 30px)
  
  h2
    +adjust-font-size-to(25px)
    +adjust-leading-to(1, 25px)
  
  p
    +leader(1)
    +trailer(1)  
  
  
  .page, header, .pagenav, .main, .pagefoot
    +transition(all .3s ease)
  
  /* 5 Column Layout */
  
  .page                                
    +container($total-columns, $tablet, $desktop)
    +susy-grid-background
  
  /* ------------------- BREAKPOINTS ---------------------------- */
  /* ------------------- MOBILE (default) ------------------------*/
  
  p
    +leader(0)
  
  header
    +container
    position: fixed
    left: 0
    right: 0
    bottom: 0
    height: 2.3em
    background: rgba(250,250,250,.7)
  
    h1#logo a
      +hide-text
      float: right
      +span-columns(1)
      background: red
  
    .navicon
      +span-columns(1)
      background: green
  
    .pagenav
      +span-columns(4)
      background: rgba(150,200,250,.3)
  
      ul
        background: #ffccff
      li
        text-align: left
  
  .main
    +span-columns(4)
    margin-top: 1em
    background: rgba(1,240,200,.3)
  
  .tile
    +isolate-grid(2, 4)
    height: 206px
    height: 233px
    margin-bottom: 1em
    background: cyan
  
    .tile_title
      +adjust-font-size-to(15px)
      +adjust-leading-to(1, 15px)
      background: #af6   
  
    .tile_use
      @extend .tile_title
      +adjust-font-size-to(10px)
      +adjust-leading-to(1, 10px)
  
  /* ------------------- TABLET ----------------------------------*/
  
  +at-breakpoint($tablet)
    .page
      +container
      +susy-grid-background
  
    p
      +leader(0)
  
    header
      +container
      position: fixed
      left: 0
      right: 0
      bottom: 0
      height: 2.3em
      background: rgba(250,250,250,.7)
  
      h1#logo a
        +hide-text
        float: right
        +span-columns(2)
        background: red
  
      .navicon
        +span-columns(1 omega)
        background: green
  
      .pagenav
        +span-columns(2 omega,9)
        background: rgba(150,200,250,.3)
  
        ul
          background: #ffccff
        li
          text-align: left
  
    .main
      +span-columns(9)
      margin-top: 1em
  
  
      img 
        +span-columns(7, 9)
  
    .tile
      +isolate-grid(3, 9)
      height: 304px
      margin-bottom: 1em
      background: cyan
  
      .tile_title
        +adjust-font-size-to(25px)
        +adjust-leading-to(1, 25px)
        background: #af6   
        margin: 10px
        padding: 5px
  
      .tile_use
        @extend .tile_title
        +adjust-font-size-to(20px)
        +adjust-leading-to(1, 20px)
  
  
  
  /* -------------------DESKTOP ----------------------------------*/
  
  +at-breakpoint($desktop)
    .page
      +container
      +susy-grid-background
  
  
    header
      +container
      position: fixed
      left: 0
      right: 0
      top: 0
      height: 0
      z-index: 3
  
      h1#logo a
        +hide-text
        float: right
        +span-columns(2)
        background: red
  
      .pagenav
        clear: both
        float: right
        +span-columns(2)
        background: rgba(150,200,250,.3)
  
    .main
      +span-columns(12 omega)
      +leader(2)
      z-index: 1
      position: relative
      background: rgba(1,240,200,.3)
  
      img 
        +span-columns(10, 14)
  
    .tile
      +isolate-grid(4, 12)
      height: 304px
      margin-bottom: 1em
  
      .tile_title
        +adjust-font-size-to(25px)
        +adjust-leading-to(1, 25px)
        background: #af6   
        margin: 10px
        padding: 5px
  
      .tile_use
        @extend .tile_title
        +adjust-font-size-to(20px)
        +adjust-leading-to(1, 20px)
  </code></pre>
  
  <p>Here are the screen shots of site in various widths:</p>
  
  <h2>4 Column Responsive Mobile State</h2>
  
  <p><strong>Tiles look like squares: GOOD</strong></p>
  
  <p><img src="https://i.stack.imgur.com/spB2D.png" alt="enter image description here"></p>
  
  <p><strong>320px X 480px: Tiles get squished: BAD</strong></p>
  
  <p><img src="https://i.stack.imgur.com/HTYBy.png" alt="enter image description here"></p>
  
  <p><strong>Tiles get stretched: BAD</strong></p>
  
  <p><img src="https://i.stack.imgur.com/4GL7M.png" alt="enter image description here"></p>
  
  <h2>9 Column Responsive Tablet State</h2>
  
  <p><strong>Tiles look like squares: GOOD</strong></p>
  
  <p><img src="https://i.stack.imgur.com/eJwvj.png" alt="enter image description here"></p>
  
  <p><strong>Tiles get squished: BAD</strong></p>
  
  <p><img src="https://i.stack.imgur.com/BXH4J.png" alt="enter image description here"></p>
  
  <h2>14 Column Responsive Desktop State</h2>
  
  <p><strong>Tiles look like squares: GOOD</strong></p>
  
  <p><img src="https://i.stack.imgur.com/HUBeU.png" alt="enter image description here"></p>
  
  <p><strong>Tiles get stretched: BAD</strong></p>
  
  <p><img src="https://i.stack.imgur.com/Yvy7I.png" alt="enter image description here"></p>
  
  <h2>UPDATE</h2>
  
  <p>Since I have implemented the use of Eric Meyer's <code>fluid-ratio</code> mixin from <a href="https://github.com/ericam/accoutrement/blob/master/stylesheets/accoutrement/_media.scss" rel="nofollow noreferrer">https://github.com/ericam/accoutrement/blob/master/stylesheets/accoutrement/_media.scss</a> I was able to successfully get all my tile thumbnails to have equal height and width no matter the width of the browser window. The problem now is that the <code>h3.tile_title</code> and <code>h4.tile_use</code> elements are overlapping each other in each <code>a.tile</code>. the <code>fluid-ratio</code> mixin makes all my <code>a.tile</code> have <code>position: relative</code> and all it's children, <code>h3.tile_title</code> and <code>h4.tile_use</code>, have <code>position: absolute</code>. Here is a screen shot of whats happening:</p>
  
  <p><img src="https://i.stack.imgur.com/wNM6L.png" alt="enter image description here"></p>
  
  <p>Since some of my <code>h3</code> titles wrap to become 2 lines in the <code>a</code>, I would like to be able to position the <code>h4</code> so the <code>h4</code> is always just below the <code>h3</code>. How would this be possible?</p>