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

Question

我正在创建一个完全流畅的设计作品集网站，该网站有一个设计缩略图图库页面，其中显示了一个缩略图拼贴链接网格，查看者可以单击这些链接以查看完整的艺术作品。由于该站点是完全流动的，因为高度已锁定到位，所以当在 3 种响应状态之间切换时，瓦片宽度仅与瓦片高度匹配 3 次。

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

代码如下:

@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:瓷砖被压扁:不好

瓷砖被拉伸(stretch):不好

9列响应平板状态

瓷砖看起来像正方形:好

瓷砖被压扁:不好

14列响应式桌面状态

瓷砖看起来像正方形:好

瓷砖被拉伸(stretch):不好

更新

自从我实现了来自 https://github.com/ericam/accoutrement/blob/master/stylesheets/accoutrement/_media.scss 的 Eric Meyer 的 fluid-ratio mixin 的使用。无论浏览器窗口的宽度如何，我都能够成功地让我所有的图 block 缩略图具有相同的高度和宽度。现在的问题是 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 的 super 粉丝选项，并使用 set of mixins让它 super 简单。我基于 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)

希望对您有所帮助。