8

写真をグリッドで表示するレスポンシブ デザインに取り組んでいます。写真自体は、すべての縦横比とサイズにすることができます。さらに、それらが配置されているグリッド セルも固定幅ではなく、ブラウザのサイズを変更すると拡大縮小されます。さらに、各グリッド セルは幅と高さが動的ですが、内部の画像に関係なく同じサイズです。

この非常に動的な状況で写真を適切に表示するために、私は有効なレシピを見つけました。各写真は基本的に、背景画像として設定された画像を持つ div です。動的にサイズ変更されたグリッド内の画像の不明な幅/​​高さを適切にスケーリングするために、CSS3 の background-size:cover 機能を利用しています。

最終結果は素晴らしく、UI と表示に関して私が望んでいたことを正確に実行します。それでも、私はこのソリューションのアクセシビリティが低下していることに満足していません.SEOフレンドリーではなく、プラグインフレンドリーでもありません（ソーシャルプラグインを考えてください）. したがって、私は現在の作業状況を再現しようとしていますが、今回は CSS 背景の代わりに古き良き img タグを使用しています。

background-size:cover の IE8 以下のポリフィルがあることは知っていますが、それを探しているわけではなく、img タグに基づくソリューションを探しています。また、CSS のクリップ プロパティと同様に絶対配置テクニックを使用する記事も見つけましたが、私のデザインは絶対的なサイズではないことに注意してください。

私が探しているのは、ソース (画像のサイズ) とターゲット (表示ボックス) の両方のサイズが動的である状況で、動的なサイズ変更のための background-size:cover のロジックを持つ JavaScript ルーチンだと思います。

img タグで動作する background-size:cover に相当する JavaScript はありますか?

4

4 に答える 4

4

これは古いですが、最近新しい解決策を見つけました。

div の背景画像を表示する img を作成する代わりに、画像を作成します。

<div>
    <img src="mypic.jpg"/>
</div>
<style>
    div {
        width:200px;
        height:200px;
    }
    img {
        box-sizing:border-box;
        width:100%;
        height:100%;
        background: url(mypic.jpg) no-repeat center center;
        background-size:cover;
        padding:50%;
    }
</style>

含まれる div を画像の幅/高さに設定します。次に、画像を 100% 幅/高さで内部に配置し、src を必要な画像に設定します。また、必要な画像を画像の背景画像として設定します。background-size をカバーするように設定し、パディングを 50% に設定します。

秘訣は 50% のパディングです。img の幅/高さは固定なので、パディングを増やすと、画像はどんどん小さくなります。50% は、画像を非表示にするために必要な量です。これで、画像の背景画像が希望どおりに表示されますが、それでもアクセス可能です!

http://jsfiddle.net/t72xgbw0/

于 2013-06-07T00:47:43.003 に答える
2

アクセシビリティと SEO を考えて、jQuery を使用して非常によく似た問題の解決策を作成しました。背景カバーのロジックを再現せず、それを利用しています。

実際、画像は背景を持つコンテナーの役割になり、背景カバーはプログラムで追加されます。

$imagesContainer.find('img').each(function(i, elem){
  $(elem).css({
    backgroundSize : 'cover',
    backgroundImage : 'url("' + $(elem).attr('src') + '")',
    backgroundPosition : 'center',
    display : 'block',
    height : '100%', // Or any size needed.
    width : '100%'
  });
  $(elem).removeAttr('src');
});
于 2014-01-10T04:02:21.767 に答える
-1

あなたがやりたいことは2つあると思います：

  1. ウィンドウいっぱいに画像を表示する
  2. 画像が垂直方向と水平方向の中央に配置されていることを確認してください。

問題は (画像の縦横比を維持したい場合)、画像とブラウザのサイズに応じて、垂直方向と水平方向の両方で中央揃えにする必要があることです。

display:tableとを組み合わせて使用​​し、margin:0 autoスマートな高さ/幅の設定を使用して、純粋な CSS ソリューションを作成できます。

フィドルを参照してください: http://jsfiddle.net/5yVYM/3/

.wrapper {
    display:table;
    text-align: center;
    margin:0 auto;
    width:100%;
    height:100%;
}

.wrapper div {
    display:table-cell;
    vertical-align:middle;
    max-width:100%;
    max-height:100%;
}

img {
    width:100%;
    height:auto;
}
于 2012-12-13T03:15:15.103 に答える