0

シンプルな（しかし）フルスクリーンの画像ギャラリーを作成しようとしており、この記事の最初のソリューションを採用しました

したがって、コードは次のとおりです。 

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

そして、HTMLの背景属性を変更（onclick）するためのjsコードがいくつかあります-動作します。

2 つの質問:

  • 1024x768より大きいモニターでのimgの品質はどうですか（これは私のモニターのサイズであり、すべての画像のサイズです）

  • 縦横比が異なるモニターでの画像の比率はどうですか？画像が変形して見えるのではないでしょうか？

シンプルな (css または jquery ソリューション) はありますか?

4

1 に答える 1

1

画像の品質は、ロードしている画像と同程度にしかなりません。つまり、画像が 1024x768 の場合、その解像度またはそれ以下の解像度で見栄えがよくなります。より高い解像度のブラウザーまたはディスプレイでは、画像がスケーリングされ、1:1 よりも大きなピクセルが引き伸ばされ、品質がいくらか低下します。ロード時間を節約するために、できるだけ大きな画像を使用するか、@mediaクエリを使用して大きな画像を大きなディスプレイに、小さな画像を小さな画像に提供することをお勧めします。

2 番目のポイントでは、background-size の cover ディレクティブは、アスペクト比とサイズ変更の問題を処理するように設計されており、ブラウザが使用可能なスペースに正しい比率で画像を最大限に表示できるようにします。あなたが抱えている問題について詳しく教えていただけますか？

于 2013-05-22T05:35:51.240 に答える