1

今日、Firefox 18.0.2 で奇妙な動作を発見しました。FF19.0にアップデートしてもダメでした。

特定の縦横比を維持しながら、動的なサイズのサムを作成する必要がありました。おそらく、次のような他のより良い解決策があります。

Html: - Doctype は HTML5 です

<div class="img">
   <img alt="" src="/blank.gif" class="imgScalar">
   <div class="imgA">
       <div class="imgP">
           <div style="background-image:url(-pathToThumb-)" class="thumb"></div>
       </div>
   </div>
</div>

「blank.gif」のサイズは 2x2px 固定です。辺の長さが同じであることが重要でした。

CSS:

.img {
    position: relative;
    overflow: hidden;
    margin: 1px 0;
}
.img .imgScalar {
    width: 100%;
}
.img .imgA {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url('../gfx/loader.gif');
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.img .imgP {
    padding: 0 1px;
    height: 100%;
    overflow: hidden;
}
.img .thumb {
    position: relative;
    width: 100%;
    height: 100%;
    background-position: center top;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.img .imgScalar,
.img.r16-9 .imgScalar {
    margin-bottom: -43.75%;
}
.img.r16-10 .imgScalar {
    margin-bottom: -37.5%;
}
.img.r4-3 .imgScalar {
    margin-bottom: -25%;
}
.img.r9-16 .imgScalar {
    margin-bottom: 77.77777777777777%;
}
.img.r10-16 .imgScalar {
    margin-bottom: 60%;
}
.img.r3-4 .imgScalar {
    margin-bottom: 33.333333333333314%;
}

私にとっての利点は、@media ルールにヒットしたときに CSS でアスペクト比を切り替えることができることです。

@media (max-width: 767px) {
    .img.r9-16 .imgScalar,
    .img.r10-16 .imgScalar,
    .img.r3-4 .imgScalar {
        margin-bottom: -25%;
    }
}

情報として: これは、デフォルトで幅 1200px の静的なレイアウトに統合されており、解像度が 1200px を下回り、クライアント ブラウザーがルールをサポートし、モバイル解像度にも反応する場合は流動的です (すべて CSS のみ)。

Google Chrome、Opera、Safari、Internet Explorer、および iPhone で上記をテストしましたが、これらのテスト済みデバイスで動作するようです...これを実行している唯一のブラウザーは Firefox です。

問題に見えるのは：

.thumbは絶対配置された.imgAの子要素であるため、background-size は、相対配置された.thumb自体ではなく、.imgAの次の相対親に適用されるようです。テスト目的で、.imgPも相対化しましたが、これも役に立ちません。

一時的な解決策:

HTML:

<div class="img">
    <div class="imgWrap">
        <img alt="" src="/iS16-9.gif" style="background-image:url(-imgPath-)" class="imgScalar">
    </div>
</div>

iS16-9.gif は、「ヘルパー」要素として使用されるいくつかの空白の画像の 1 つです。名前が示すように、縦横比を表すために幅 16 ピクセル、高さ 9 ピクセルがあります。

CSS:

.img > .imgWrap {
    position: relative;
    margin: 1px;
    background-image: url('../gfx/loader.gif');
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.img > .imgWrap > img {
    width: 100%;
    background-position: center top;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

javascript-components を使用せずに解像度の変更に対応する機能がなくなってしまったのは残念です。

たぶん、この問題を解決する方法を知っている人もいますか？

//編集:最初の解決策と互換性のないブラウザを確認しました:

  • ファイアフォックス
  • イタチ
  • 風はかせ 0.5.8
  • アイスエイプ
  • 海猿

MSIE5.5 以外の他のブラウザーでは問題はありません。MSIE6.0 でもこれを処理できるようです。Mozilla ベースのブラウザーだけが、すべてのバージョンでこれに完全に失敗しています (私が見たように 20 も)

4

1 に答える 1

0

数時間のデバッグの後、私は自分で問題を解決することができました。jsfiddle でサンプルを公開するように勧めてくれた @IgorJerosimic に感謝します。サンプルを公開した後、コード自体が本来すべきことを正確に実行することがわかりました。

この問題は、スケーリングが行われた方法とは何の関係もありませんでした。実際、それは私の css-grid-system が列を処理する際の振る舞いの結果でした。float を使用する代わりに、少しトリッキーな inline-block を使用する必要がありました - Firefox2.0 への古いフォールバックにより、クラッシュが発生しました。

display: inline-block;
display: -moz-inline-grid;
vertical-align: top;
min-height: 1px;

非推奨の行表示を削除した後: -moz-inline-grid; すべてが再びうまくいきました。(コードはもともとドイツのページhttp://bittersmann.de/articles/inline-block/example9.htmlからのものでした)

最初の解決策は、MSIE6.0 までのクロスブラウザー互換性です (背景のスケール機能のフィルター規則を追加すると、画像は比率でフォーマットされますが、拡大または縮小されません)。確かに、必要なコードの量は少し重いです...しかし、これまでのところ、固定比率のサムプレビューなどのレスポンシブ自動スケーリング画像ボックスを作成し、画像の周りに黒い縞模様を避けることが私の唯一の解決策です。

最適化する方法は？

これからは、最初のサンプルのコードをどのように最適化して、大量のトラフィックを回避するかという問題があります。2 つのサンプルを比較すると、最初のサンプルと 2 番目のサンプルのサイズに 26% の違いがあります。250 個のサムネイルがあるギャラリーでは、最初のサンプルで 12.250 文字のオーバーヘッドが発生します。UTF-8 文字セットで計算すると、これは (正しく計算した場合) 11.9kB のトラフィック、または 30kB のダウンリンクを使用する低速の「DSL」の場合、要求ごとに 0.399 秒の差になります。

この問題に直面している可能性のある人に役立つことを願っています。

ドミニク・ハビヒツバーグ

于 2013-02-22T07:29:43.530 に答える