是否可以使DIV的高度与Compass或Susy的DIV宽度相匹配？

Question

我正在创建一个完全流畅的设计组合网站，其中有一个设计缩略图库页面，显示了一个缩略图平铺链接网格，观众可以点击这些链接来查看完整的艺术作品。由于该位置是完全流动的，因此当瓷砖高度被锁定就位时，瓷砖宽度仅与瓷砖高度匹配3倍，因为在3个响应状态之间切换。

如何使高度与每个缩略图图块的宽度相匹配？

以下是代码：

@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)

以下是各种宽度的网站截屏：

4列响应移动状态

瓷砖看起来像正方形：好

320px X 480px：瓷砖被压扁：坏了

Tiles被拉伸：BAD

9列响应式平板电脑状态

瓷砖看起来像正方形：好

Tiles被压扁：BAD

14列响应式桌面状态

瓷砖看起来像正方形：好

Tiles被拉伸：BAD

更新

由于我已经实现了使用来自https://github.com/ericam/accoutrement/blob/master/stylesheets/accoutrement/_media.scss的Eric Meyer的fluid-ratio mixin，因此无论浏览器窗口的宽度如何，我都能够成功地使我的所有平铺缩略图具有相同的高度和宽度。现在的问题是h3.tile_title和h4.tile_use元素在每个a.tile中相互重叠。 fluid-ratio mixin使我的所有a.tile都有position: relative，所有孩子，h3.tile_title和h4.tile_use都有position: absolute。这是最新发布的屏幕截图：

由于我的一些h3标题在a中变为2行，我希望能够定位h4，以便h4始终只是低于h3。这怎么可能？

Answer 1

CSS Tricks有一个很棒的rundown of fluid-media techniques。我是Intrinsic Ratios选项的忠实粉丝，使用set of mixins使其变得非常简单。我的基础是来自toolkit的代码，它现在处理a bit differently。使用它是这样的：

.tile
  +isolate-grid(4, 12)
  // ratio of 16/9, with a width equal to 4 of 12 columns
  +fluid-ratio(16/9, columns(4,12))

如果你有额外的标记，你可以使用它作为比率，并忽略columns()函数：

.tile
  +isolate-grid(4, 12)

.inside
  // ratio of 16/9, auto (100%) width
  +fluid-ratio(16/9)

希望有所帮助。

Answer 2

1. 根据显示器的宽度（和高度）计算最佳字体大小
2. 为瓷砖提供em的宽度和相同的高度。 10em似乎是一个很好的价值。

见jsfiddle。或者，更好地用于演示目的，只有同一小提琴的output pane。