どういうわけか、その画像マトリックスの例で何度も何度も問題に遭遇したようです。Susy と組み合わせて対処しています。:/ プロジェクトにメディア クエリを適用して応答性を高めてプロジェクトを終了する準備として、最初に現在の状態を調べ、ブラウザー ウィンドウのサイズを変更しました。次のことが起こりました。
https://dl.dropbox.com/u/8578/Resize.mov
表示されている両方のイメージ マトリックスは、ラスター イメージで構成されています。黒の画像マトリックスは、問題なくサイズ変更および拡大されます。しかし、2 番目のマトリックスには、再び拡大する際の問題があります。それは単純なCSSの問題ですか、それともSusyに関連していますか? そして、それを修正する方法はありますか？:/
Susy の基本設定は次のとおりです。
$total-columns: 24;
$column-width: 3%;
$gutter-width: 1%;
$grid-padding: 0;
画像については、以下が適用されました。
img{
width:100%;
max-width: 100%;
height:auto !important;
}
最初のマトリックスの HTML 部分は次のようになります (li 要素を 1 つだけ入力しました。他の 27 要素は、タイトルとリンクされた画像のみが異なります)。
<ul class="customers sectionwrap">
<li><a><img title="Company" src="img/logo.png" alt="Logo" /></a></li>
</ul>
最初のマトリックス (7x4) の Susy とレイアウト関連の CSS パーツは次のようになります。
.customers {
@include with-grid-settings($gutter: 0.1%){
li {
margin-right: -100%;
@include span-columns(2,14);
@include nth-omega(7n);
@for $g from 1 through 28
{
&:nth-child(#{$g}){@include push(0);}
}
}
}
}
2 番目のマトリックスの HTML 部分は次のようになります (li 要素を 1 つだけ入力しました。他の 8 つの要素は、タイトルとリンクされた画像のみが異なります)。
<ul class="moodlegrid sectionwrap">
<li><a class="ajax1" href="projekt1.html"><img title="Projekt1" src="img/1.jpg" alt="Projekt1" /><img title="Projekt1" src="img/2.jpg" alt="Projekt1" /><span class="spiceup">Zum Projekt</span></a></li>
</ul>
2 番目のマトリックス (3x3) の Susy およびレイアウト関連の CSS パーツは、そのように見えます。これらは、異なるパーシャルに配置されているため、分割されています。
.moodlegrid{
@include with-grid-settings($gutter: 0.8%){
li{
margin-right: -100%;
@include trailer(1 / 2);
@include span-columns(6,18);
@include nth-omega(3n);
@for $i from 1 through 9
{
&:nth-child(#{$i}) {@include push(0);}
}
}
}
}
.moodlegrid{
li{
a{
position: relative;
float:left;
display:block;
img:nth-child(1){
float:left;
display:block;
}
img:nth-child(2){
display: none;
}
span{
display:none;
}
}
a:hover{
img:nth-child(2){
display: block;
position: absolute;
z-index: 100;
top:0;
left:0;
}
span{
display: block;
position: absolute;
text-align:center;
top: 42%;
left: 34%;
z-index:101;
padding: 0.24em;
@include border-radius(5px, 5px);
@include box-shadow(black 2px 2px 10px);
}
}
}
}