web-dev-qa-db-ja.com

bootstrap写真付きカルーセル:最適な画像サイズ?

Bootstrap のカルーセルを試しているので、写真で使用したいと思います。

質問:カルーセルで使用するためにアップロードする必要がある写真の最適なサイズは何ですか?

現在のBootstrap=配布(v3.2.0)では、例 carousel.html は背景として単純な1x1ピクセルの画像を使用しています:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">

これが文書化されておらず、実験した写真がラップトップ画面上で引き伸ばされたり歪んだりしています。

13
lara michaels

実際に「最適な」画像サイズはありません。 1x1ピクセルの例では、含まれているdivの全範囲をカバーするために繰り返し繰り返されるピクセルです。

このカルーセルのBootplyデモは、例として1024x700ピクセルの画像を使用します。画面の全幅にまたがるカルーセル画像が必要な場合は、解像度が高すぎないように少なくとも1024ピクセル(おそらくはより広い)の画像を使用することをお勧めします。ロードに時間がかかるためです。

画像の高さはおそらく幅よりも小さくなり、実際に使用している画像の種類とカルーセル画像の高さによって異なります。

それ以外の場合、最善の方法は、異なる画像を試してみて、見栄えを良くすることです

注:Bootplyデモでは http://placehold.it を使用します。これは、さまざまな画像サイズを試すための優れたツールであるか、 http:// placekitten.com/

10
Dan

実際、このカルーセルが画像を強制的に表示する特定のアスペクト比があります。このアスペクト比を使用しない場合、画像はこの比率で歪んで表示されます。カルーセルは画像の縦横比と一致しません。

それが使用する奇妙なロバ比は、実際にはこの目的のためのかなり見栄えの良いアスペクト比です。 。 。ドラムロールしてください。 。 。 84:25!何回も試してみましたが、私にとって最適なサイズは1680x500です。確かに、より大きなデバイスでは少し伸びて、少しパリパリ感が失われますが、それでも見栄えがよく、ファイルサイズが管理しやすく、ほとんどのモニターで見栄えがよくなります。

これを確認するには、getbootsrapのカルーセルサンプルを使用します。 comを開き、全画面で開き、スクリーンショットを撮ります。次に、カルーセルで領域を切り取ります。画像サイズを決定するお好みの方法を使用し、お気に入りのアスペクト比計算機にそれらの数字を差し込みます。

1
Texx Smith