问题
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.
How can I make the height match the width of each thumbnail tile?
Here is the 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)
Here are the screen shots of site in various widths:
4 Column Responsive Mobile State
Tiles look like squares: GOOD
320px X 480px: Tiles get squished: BAD
Tiles get stretched: BAD
9 Column Responsive Tablet State
Tiles look like squares: GOOD
Tiles get squished: BAD
14 Column Responsive Desktop State
Tiles look like squares: GOOD
Tiles get stretched: BAD
UPDATE
Since I have implemented the use of Eric Meyer's fluid-ratio mixin from https://github.com/ericam/accoutrement/blob/master/stylesheets/accoutrement/_media.scss 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 h3.tile_title and h4.tile_use elements are overlapping each other in each a.tile. the fluid-ratio mixin makes all my a.tile have position: relative and all it's children, h3.tile_title and h4.tile_use, have position: absolute. Here is a screen shot of whats happening:
Since some of my h3 titles wrap to become 2 lines in the a, I would like to be able to position the h4 so the h4 is always just below the h3. How would this be possible?
回答1:
CSS Tricks has a great rundown of fluid-media techniques. I'm a big fan of the Intrinsic Ratios option, and use a set of mixins to make it super-simple. I based that on code from toolkit, which now does things a bit differently. Use it something like this:
.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))
If you have extra markup you can use that for the ratio, and leave out the columns() function:
.tile
+isolate-grid(4, 12)
.inside
// ratio of 16/9, auto (100%) width
+fluid-ratio(16/9)
Hope that helps.
回答2:
- Calculate the optimal font size based on the width (and height) of the display
- Give the tiles a width in
emand the same height.10emseems like a good value.
See jsfiddle. Or, better for demonstration purposes, only the output pane of the same fiddle.
来源：https://stackoverflow.com/questions/17318398/is-it-possible-to-make-the-height-of-a-div-match-the-width-of-a-div-with-compass