次の要件に従って、ページに複数の画像を表示したいと思います。
それらはすべて高さに適合します
それらはすべて1行にあり、必要に応じて幅を切り取ります
反射はいいだろう
background-imageと次の構造を使用して動作させました。
<!-- row images -->
<div class="row-fluid">
<div class="span12" id="cover_pictures">
<div class="images1">
<div class="images2" style="background-image: url('http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="images2" style="background-image: url('http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="images2" style="background-image: url('http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="images2" style="background-image: url('http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="images2" style="background-image: url('http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="clearfix"></div>
</div> </div>
</div>
<!-- row for reflections, php generated -->
<div class="row-fluid">
<div class="span12 hidden-phone" id="cover_reflections">
<div class="images1">
<div class="images2" style="background-image: url('http://myserver/reflect.php?http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="images2" style="background-image: url('http://myserver/reflect.php?http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="images2" style="background-image: url('http://myserver/reflect.php?http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="images2" style="background-image: url('http://myserver/reflect.php?http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="images2" style="background-image: url('http://myserver/reflect.php?http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="clearfix"></div>
</div>
</div>
</div>
そして、次の CSS :
#cover_pictures .images1 {
height:350px;
}
#cover_reflections .images1 {
height:100px;
}
.images1 {
width:100%;
}
.images2 {
/* top for reflections, doesnt matter for pictures*/
background-position:center top;
background-repeat:no-repeat;
background-size:auto 100%;
float:left;
height:100%;
overflow: hidden;
margin:0px 0%;
}
この JS を使用して.images2div のサイズを変更します。
var l = dataJson.length; // number of images
var margTot = 5; // 5% of the space for margins
$(".images2").css("margin-left", margTot / 2 / l + "%");
$(".images2").css("margin-right", margTot / 2 / l + "%");
$(".images2").css("width", (100 - margTot)/l + "%");
問題は、PHP からのリフレクションの読み込みが非常に遅く、生成される画像が大きすぎるため、Reflection.js を使用することです。このスクリプトは<img />ではなく でのみ機能しますが、要素background-imageで同じレイアウトを作成できないようです。<img />画像が歪んでいる、そうでない場合は幅にしか収まらないなど。
私はhtml/cssの専門家ではないので、簡単に思えるかもしれませんが、どんな回答でも大歓迎です! 詳細が必要な場合はお気軽にお尋ねください。
簡単に動作させることができれば、GitHub で jQuery プラグインとしてリリースする予定です。
編集: 画像のリストには JSON API が取り込まれ、URL と画像のサイズが表示されます。Web ページ上の画像の数はさまざまであるため、サーバー上の画像のサイズを変更できません。
編集：将来の読者へ：この質問に対する両方の素晴らしい回答に報いたかったので、次のことを行いました
Troy Alfrod 氏の非常に詳細で見栄えの良い回答に対して賞金を授与しました
Vals のソリューションのセットアップのシンプルさを検証しました
私自身のシナリオでは、実装とテストの遅延が非常に短いため、今のところ最も簡単な答えを選択することにしました。これが私がしたことです：
と の両方
#cover_pictures > .images2に#cover_reflections > .images2、同一の同じ div が含まれ、background-image同じスタイル (これ以上はありませんreflect.php)に追加
transform: scaleY(-1);（および他のブラウザの同等物）#cover_reflections > .images2のサイズを
#cover_reflections制限100px.mask提案された div Vals を追加しました。
プロパティをサポートしていないため、IE7-8 を除いて、非常にうまく機能しbackground-sizeます。そこで、php にバックエンドを追加して、すべての画像を正しい高さで送信しました (キャッシュ サポートなどを使用)。それは計画の一部ではありませんでしたが、私はしなければなりませんでした。必要な高さはそのまま取得されますvar height = $('#cover_pictures .images1').height();
それが他の誰かを助けることを願っています!!
セットアップ時に jQuery プラグインへのリンクをここに公開します。
