Pencere tarayıcınızın genişliğini http://twitter.github.com/bootstrap/examples/carousel.html açıkken azaltırsanız, arka plan görüntüsü en boy oranının değiştiğini görebilirsiniz. Görüntüyü sola ya da sağa ya da yatay olarak hizalayarak (1: 1) korumak istiyorum.Twitter 2.2 atlıkarınca örneği: Görüntü oranının nasıl korunacağı?
Önerileriniz nelerdir?
Sen seçenekleri var ve her ikisi de görüntü oranını korumak:
Seçenek 1
background: url(yourimage.jpg) no-repeat center center/cover;
son bölüm background-size: cover özelliktir. tüm div alanını doldurduğundan emin olmak için tarayıcı genişliğine bağlı olarak arka plan görüntüsünü yakınlaştırır.
Örnek: http://i.imgur.com/0tQ9Rxm.png
Seçenek 2
background: url(yourimage.jpg) no-repeat center center;
Bu kısmen aynı etkiye ama zoom olmadan bu. Arka plan kendi görünümünü koruyacak ve ortalanacaktır, ancak tarayıcı genişliğiniz resim genişliğinizden daha büyükse (bu durumda 1500 piksel), arka plan rengini göreceksiniz (bu durumda beyaz).
Örnek: http://i.imgur.com/6x594jH.png
Ben seçeneği 1 önerilir. Tarayıcınızı yeniden boyutlandırırsanız ancak neredeyse hiç kimse yokken yakınlaştırma efektini görürsünüz ve ziyaretçi yalnızca dolu bir arka plan görür.
İlk seçenek ihtiyacım olan şeydi, ancak ikincisi de ilginç. Teşekkür ederim :) –
En boy oranındaki değişiklikten çok daha iyi, teşekkürler! Bununla birlikte, görünüm/ekranın boyutu çok küçük olduğunda (ör., Bir iPhone'da), görüntü kırpılır ... –
@jgthms 'yanıtının devamı olarak 1. seçeneği kullandım. Ancak, iOS Safari'de arka plan resmi hiç gösterilmiyordu. Tek satırlı CSS sözdiziminin güzel oynatılmadığı anlaşılıyor. CSS burada devreye girer benim gibi görmedik kim olanlar için
background: url(yourimage.jpg) no-repeat center center;
background-size: cover;
(iOS tarzı ile) bir in-bağlam örnek: Aşağıdakilerden bunu değiştirerek almak o çalışma başardı . Bunun Bootstrap 3.1.1 kullanıyor olduğunu not etmeliyim.
<div class="item active" style="background: url(slide1.jpg) no-repeat center center; background-size: cover;">
<div class="container">
<div class="carousel-caption">
<p>Example text
<a class="btn btn-lg btn-primary" href="YourURLHERE" role="button">YourLink</a>
</p>
</div>
</div>
</div>
bu img değildir {max-width: 100%;} veya bu soruyu yanlış anlamadım mı? – Richlewis
@Richlewis farklı: Bu sorun, bootstrap duyarlı stil sayfası ile ilgilidir. Deneyin;) –