2014-08-28 32 views
9

Bootstrap 'atlıkarınca ile deneylerim ve fotoğrafları ile kullanmak istiyorum.bootstrap carousel: optimal görüntü boyutu?

Soru: Atlıkarınca kullanmak için yüklemem gereken resimler için en uygun boyut nedir? Geçerli Bootstrap dağılımında

(v3.2.0) örneği carousel.html arka plan olarak basit bir 1x1 piksel resmi kullanır:

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

bulamadım bu belgelenmiş ve ben olsun ile denemişlerdir fotoğrafları dizüstü bilgisayar ekranında gerilmiş/bozuk.

+0

Evrensel en uygun boyut yoktur, en uygun boyut, özel uygulamanız için anlamlı olan şeydir. – APAD1

cevap

8

Gerçekten "en iyi" görüntü boyutu yok. 1x1 pikseli olan örnekte, içerdiği div'in tüm açıklığını kapatmak için tekrar tekrar tekrarlanan bir pikseldir.

Bu Bootply Demo of Carousel örnek olarak bir 1024x700 px resim kullanır. Ekranın tüm genişliğini kapsayan bir karusel görüntüsüne sahip olmak istiyorsanız, büyük olasılıkla çok yüksek çözünürlükte olmasa da, en az 1024 piksel genişliğinde (muhtemelen daha geniş) bir görüntü kullanmak için iyi bir fikir olabilir. Çünkü bu yüklenecek uzun bir zaman alacaktı.

Görüntü yüksekliği muhtemelen genişlikten daha az olacak ve gerçekten kullandığınız görüntü türüne ve karusel görüntüsünün ne kadar uzun olmasını istediğinize bağlıdır.

Aksi takdirde yapılacak en iyi şey, farklı görüntüleri denemek ve neyin iyi göründüğünü görmek.

Not: Bootply demo farklı görüntü boyutlarını denemek için iyi bir araçtır http://placehold.it kullanan veya http://placekitten.com/ göz atın.

+0

bunun için teşekkürler. Sorunun, görüntü yüksekliğini düzelttiğim ve gördüğüm bozulmaya neden olan carousel.css dosyasında sabit "height: 500px" olduğunu fark ettim. Fotoğraf kullanıldığında ve mevcut ekranlar verildiğinde, yatay olarak yayılması gereken fotoğraflar için önerilen piksel genişliği açısından "en iyi uygulama" var mı? –

+0

En iyi uygulama yok, sadece en boy oranını değiştirmeyin. Yani bir resim 600x300 ise, 500x400 olan bir div içine koymayın. Bu http://andrew.hedges.name/experiments/aspect_ratio/ adresine yardımcı olmak için bir en boy oranı hesaplayıcısı kullanabilirsiniz. – Dan

İlgili konular