
自分のサイトでの画像の表示方法が好きではありませんでした。 私はある種の秩序、依存を望んでいました。 そのため、Googleでスクリプトとソリューションを探す必要がありました。 検索に失敗した後、自分で何かをすることが決定されました。
でも何? 私は、人気のあるサイトからどのように写真が描かれるかを見始めました。 Google画像とGoogle+で出力を確認することを考えるまで、すべてが好きではありませんでした。 私は
これに気付かなかったという事実に感銘を受けました。写真は切り取られずに幅と高さが揃えられています。 この原則を実装したかった。 モザイクになります。 そして、すべてが整っているようです。
ためらうことなく、同じように画像を出力できるコードを書きました。
私はそれを非常に簡単に行うことにしました。各行を特定の高さと幅にします。 主なことは、高さが条件で設定された高さを超えてはならないことです。
フォーミュラ
マーカーと冷蔵庫を装備して(はい、ホワイトボードを持っていません)、簡単な方程式を作成して関係を見つけました。
h
1 * X
1 = h
2 * X
2 = ... = h
n X
n =高さ;
w
1 * X
1 + w
2 * X
2 + ... + w
n * X
n =幅;
どこで
h
1-n-画像の高さ、
w
1-n-画像の幅。
X
1-n-スケーリング変数(高さと幅をそれに掛けると、画像は比例して変化します)。
高さ=幅* h
1 /(w
1 + w
2 * h
1 / h
2 + w
3 * h
1 / h
3 + ... + w
n * h
1 / h
n )であることが判明しました。
コード
$widthdef=800;
幅全体に表示する前に十分な写真がない場合、指定された最大の高さでそれらを表示します。
著者から
コードは完全ではないため、コメントが考慮されます。
ここでデモを見ることができ
ます 。 そこでオプションを満喫できます。 ロードすると、画像は可能な限り低い解像度にサイズ変更されます。 ホスティングが弱いので、遅れをおadvanceびします。
こちらからダウンロードできます。
他のアイデアや改善点も聞きたいです。
PS:このコードは小さな写真用ではありません(個人的には必要ありません)。 大小をロードすると、後者が伸びることがあります。 誰かがエレガントなソリューションを思いついたら、それを共有してください。
UPD:コメントをありがとう、とても助かりました。 改善します。 エラーを修正しました。 すでに述べたように、すべての写真はまだ
ここにあります (3時間後に王冠によって削除されます)。