私は完全に流動的なデザイン ポートフォリオ サイトを作成しています。このサイトには、閲覧者がクリックしてアート作品全体を表示できるサムネイル タイル リンクのグリッドを表示するデザイン サムネイル ギャラリー ページがあります。サイトは完全に流動的であるため、高さが固定されているため、タイルの幅はタイルの高さと 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 列のレスポンシブ モバイル状態
タイルが四角に見える：GOOD
320px X 480px: タイルがつぶれる: BAD
タイルが伸びる: BAD
9 カラム対応のタブレット状態
タイルが四角に見える：GOOD
タイルがつぶれる: BAD
14 列のレスポンシブ デスクトップ状態
タイルが四角に見える：GOOD
タイルが伸びる: BAD
アップデート
https://github.com/ericam/accoutrement/blob/master/stylesheets/accoutrement/_media.scssからEric Meyer のfluid-ratiomixinの使用を実装したので、すべてのタイル サムネイルを同じ高さと幅にすることができました。ブラウザ ウィンドウの幅に関係なく。問題は、との要素がそれぞれの で互いに重なり合っていることです。mixin はすべての my haveとall it's children を作成し、and 、 have を作成します。何が起こっているかのスクリーンショットは次のとおりです。h3.tile_titleh4.tile_usea.tilefluid-ratioa.tileposition: relativeh3.tile_titleh4.tile_useposition: absolute
一部のh3タイトルは で 2 行に折り返されるため、を常に のすぐ下aに配置できるようにしたいと考えています。これはどのように可能でしょうか？h4h4h3