Twitter Bootstrap Karuzela Nie Stretching Obrazy tła

Question

które chciałbym karuzelę skalować proporcjonalnie obrazu tła

w tej kwestii Bootstrap Carousel Image does not scale proportionately zaleca się pozostawić obraz wyraźny wymiar, ale nie mogę zrozumieć, co to znaczy.

Answer 1

Zestaw ten w HTML

Dla każdego img element w swojej karuzeli, można ustawić właściwość width do 100% tak (choć nie powinna być konieczna, jeśli naturalna rozdzielczość jest większa niż w przypadku kontroli):

<img src="http://i.imgur.com/OEdBxVD.jpg" width='100%'> 

• normalnie, ten obraz byłby zbyt mały, aby w pełni rozwinąć, ale 100% skaluje go.
• upewnij się, że nie masz zestaw width lub height do każdego piksela rozmiarach

jFiddle

ponieważ obraz jest zamiar iść na pełnym ekranie, należy spróbować dostać się w ręce rozdzielczości to naturalnie spróbuje wykorzystać całą dostępną szerokość. Gdy przeglądarka musi przeskalować obraz, spowoduje to powstanie artefaktów.

Answer 2

Chodzi o to, aby pozostawić szerokość = px i wysokość = px z obrazu (lub stylów obrazu). Możesz ustawić width = "100%" i zejść z wysokości. Przeglądarka skaluje się proporcjonalnie do Ciebie.

Answer 3

Wypróbuj tę opcję bez wbudowanych stylów. Po prostu dodaj to do swojego arkusza stylów, aby nadpisać styl bootstrap.css.

.carousel .item { 
width: 100%; 
/*slider width*/ 
max-height: 600px; 
/*slider height*/ 
} 
.carousel .item img { 
width: 100%; 
/*image width*/ 
}