jak zrobić obrazki z programu do automatycznego twitter do bootstrap 3, aby dopasować obraz do karuzeli?

Question

Mam problemy z dokładnym dopasowaniem obrazów do pudełka.

Chcę, aby zachować proporcje, rozmiar, wymiary, ale dopasować/zmniejszyć w polu karuzeli.

jak widać im brakuje połowę obrazu, to dlatego, że mam ustawioną wysokość, ale chcę go do wielkości auto stworzony do skrzynki karuzeli czy to ma sens ...

www.bollinbuild.co.uk/index.html to miejsce, w którym można zobaczyć karuzelę w akcji.

każdy obraz ma większy rozmiar w wymiarze niż karuzela, dlatego tracę połowę obrazu i jego jakość.

3 obrazy używane są;

www.bollinbuild.co.uk/images/1.jpg
www.bollinbuild.co.uk/images/2.jpg
www.bollinbuild.co.uk/images/3.jpg

to jest mój kod;

CSS

<style type="text/css"> 

.item{ 
    text-align: center; 
    width: auto; 
} 

.bs-example{ 
    margin: 10px; 
} 

.slider-size { 
height: 300px; /* This is your slider height */ 

} 
.carousel { 
width:80%; 
margin:0 auto; /* center your carousel if other than 100% */ 
} 
</style> 

HTML

<div class="container"> 
<div class="row"> 

<div class="bs-example"> 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
     <!-- Carousel indicators --> 
     <ol class="carousel-indicators"> 
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
      <li data-target="#myCarousel" data-slide-to="1"></li> 
      <li data-target="#myCarousel" data-slide-to="2"></li> 
     </ol> 
     <!-- Carousel items --> 
     <div class="carousel-inner"> 
      <div class="active item"> 
       <div style="background:url(/images/1.jpg) center center; 
      background-size:cover;" class="slider-size"> 
    </div> 
      </div> 
      <div class="item"> 
       <div style="background:url(/images/2.jpg) center center; 
      background-size:cover;" class="slider-size"> 
    </div> 
      </div> 
      <div class="item"> 
       <div style="background:url(/images/3.jpg) center center; 
      background-size:cover;" class="slider-size"> 
    </div> 
      </div> 
     </div><!-- /.END CAROUSEL DIV --> 
    </div><!-- /.END MYCAROUSEL DIV --> 
</div><!-- /.END BSEXAMPLE --> 
</div> 
</div> 

Czytałem o umieszczenie zdjęć w div i jako adres URL tle, a następnie w tagu, ale im wciąż nie pełny obraz siedzieć w karuzeli.

Replace the image with a container div using the image file as a background. 
Set width to 100% so it will expand to fill it’s container. Set the height of the slider so it will have a consistent display regardless of the image size. 
Win 

źródło http://parkhurstdesign.com/improved-carousels-twitter-bootstrap/

Answer 1

Zamiast dokonywania obrazom tła div, umieścić je jako rzeczywisty <img/> elementem w tych div i dać im wysokość 100% (wybierz wysokość ponieważ Twoja wysokość złamie się przed szerokością, ponieważ masz szerokie obrazy).

Ten

<div class="slider-size"> 
    <img src="/images/1.jpg" style="height: 100%;" /> 
</div> 

Zamiast tego

<div style="background:url(/images/1.jpg) center center; background-size:cover;" class="slider-size"></div> 

CSS zapytaniami mediów:

/* Mobile */ 
@media (max-width: 767px) { 
    .slider-size { 
     height: auto; 
    } 
    .slider-size > img { 
     width: 80%; 
    } 
} 

/* tablets */ 
@media (max-width: 991px) and (min-width: 768px) { 
    .slider-size { 
     height: auto; 
    } 
    .slider-size > img { 
     width: 80%; 
    } 
} 

/* laptops */ 
@media (max-width: 1023px) and (min-width: 992px) { 
    .slider-size { 
     height: 200px; 
    } 
    .slider-size > img { 
     width: 80%; 
    } 
} 

/* desktops */ 
@media (min-width: 1024px) { 
    .slider-size { 
     height: 300px; 
    } 
    .slider-size > img { 
     width: 60%; 
    } 
}