是否可以使用 Compass 或 Susy 使 DIV 的高度与 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：瓷砖被压扁：不好

图块被拉伸：不好

9 列响应式平板状态

图块看起来像正方形：好

瓷砖被压扁：不好

14 列响应式桌面状态

图块看起来像正方形：好

图块被拉伸：不好

更新

自从我实现了使用来自https://github.com/ericam/accoutrement/blob/master/stylesheets/accoutrement/_media.scss 的 Eric Meyer 的fluid-ratio 混合后，无论浏览器窗口的宽度如何，我都能成功地使我的所有图块缩略图具有相同的高度和宽度。现在的问题是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 中换成了两行，因此我希望能够定位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。