Как правильно настроить весы карусели?

Question

Я использую бутстрап-карусель и замечен на мобильных и небольших экранах, изображения просто выглядят действительно «тощими». Я знаю, что это часть реагирования, но я видел на некоторых сайтах, где карусель поддерживает оригинальное соотношение сторон и просто масштабируется до меньшей карусели.

Как я могу это сделать с помощью моего кода?

https://jsfiddle.net/nv7rsgpg/9/share

Кажется, когда я изменить высоту: 100vh на авто, он работает, но каждый раз, когда я нажимаю кнопки со стрелками высоту конечно постоянно постоянно меняется в зависимости от размера их.

<!-- Navigation --> 
<a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a> 
<nav id="sidebar-wrapper"> 
    <ul class="sidebar-nav"> 
     <a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle"><i class="fa fa-times"></i></a> 
     <li class="sidebar-brand"> 
      <a href="#top" onclick = $("#menu-close").click(); >Start Bootstrap</a> 
     </li> 
     <li> 
      <a href="#top" onclick = $("#menu-close").click(); >Home</a> 
     </li> 
     <li> 
      <a href="#about" onclick = $("#menu-close").click(); >About</a> 
     </li> 
     <li> 
      <a href="#services" onclick = $("#menu-close").click(); >Services</a> 
     </li> 
     <li> 
      <a href="#portfolio" onclick = $("#menu-close").click(); >Portfolio</a> 
     </li> 
     <li> 
      <a href="#contact" onclick = $("#menu-close").click(); >Contact</a> 
     </li> 
    </ul> 
</nav> 

<header> 
    <div id="myCarousel" class="carousel slide" data-ride="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> 
      <li data-target="#myCarousel" data-slide-to="3"></li> 
     </ol> 
     <!-- Wrapper for slides --> 
     <div class="carousel-inner" role="listbox"> 
      <div class="item active"> 
       <img src="http://lorempixel.com/460/345/cats" /> 
      </div> 
      <div class="item"> 
       <img src="http://lorempixel.com/460/345/business" /> 
      </div> 
      <div class="item"> 
       <img src="http://lorempixel.com/460/345/abstract" /> 
      </div> 
      <div class="item"> 
       <img src="http://lorempixel.com/460/345/transportation" /> 
      </div> 
     </div> 
     <!-- Left and right controls --> 
     <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
      <span class="sr-only">Previous</span> 
     </a> 
     <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
      <span class="sr-only">Next</span> 
     </a> 
    </div> 
</header> 


<!-- About --> 
<section id="about" class="about"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-12 text-center"> 
       <div id="myCarousel2" class="carousel slide" data-ride="carousel"> 
     <!-- Indicators --> 
     <ol class="carousel-indicators"> 
      <li data-target="#myCarousel2" data-slide-to="0" class="active"></li> 
      <li data-target="#myCarousel2" data-slide-to="1"></li> 
      <li data-target="#myCarousel2" data-slide-to="2"></li> 

     </ol> 
     <!-- Wrapper for slides --> 
     <div class="carousel-inner" role="listbox"> 
      <div class="item active"> 
       <img src="http://lorempixel.com/460/345/business" /> 
      </div> 
      <div class="item"> 
       <img src="http://lorempixel.com/460/345/business" /> 
      </div> 
      <div class="item"> 
       <img src="http://lorempixel.com/460/345/business" /> 
      </div> 
     </div> 
     <!-- Left and right controls --> 
     <a class="left carousel-control" href="#myCarousel2" role="button" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
      <span class="sr-only">Previous</span> 
     </a> 
     <a class="right carousel-control" href="#myCarousel2" role="button" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
      <span class="sr-only">Next</span> 
     </a> 
    </div> 
      </div> 
     </div> 
     <!-- /.row --> 
    </div> 
    <!-- /.container --> 
</section> 

<!-- Services --> 
<!-- The circle icons use Font Awesome's stacked icon classes. For more information, visit http://fontawesome.io/examples/ --> 
<section id="services" class="services bg-primary"> 
    <div class="container"> 
     <div class="row text-center"> 
      <div class="col-lg-10 col-lg-offset-1"> 
       <h2>Our Services</h2> 
       <hr class="small"> 
       <div class="row"> 
        <div class="col-md-3 col-sm-6"> 
         <div class="service-item"> 
          <span class="fa-stack fa-4x"> 
          <i class="fa fa-circle fa-stack-2x"></i> 
          <i class="fa fa-cloud fa-stack-1x text-primary"></i> 
         </span> 
          <h4> 
           <strong>Service Name</strong> 
          </h4> 
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
          <a href="#" class="btn btn-light">Learn More</a> 
         </div> 
        </div> 
        <div class="col-md-3 col-sm-6"> 
         <div class="service-item"> 
          <span class="fa-stack fa-4x"> 
          <i class="fa fa-circle fa-stack-2x"></i> 
          <i class="fa fa-compass fa-stack-1x text-primary"></i> 
         </span> 
          <h4> 
           <strong>Service Name</strong> 
          </h4> 
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
          <a href="#" class="btn btn-light">Learn More</a> 
         </div> 
        </div> 
        <div class="col-md-3 col-sm-6"> 
         <div class="service-item"> 
          <span class="fa-stack fa-4x"> 
          <i class="fa fa-circle fa-stack-2x"></i> 
          <i class="fa fa-flask fa-stack-1x text-primary"></i> 
         </span> 
          <h4> 
           <strong>Service Name</strong> 
          </h4> 
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
          <a href="#" class="btn btn-light">Learn More</a> 
         </div> 
        </div> 
        <div class="col-md-3 col-sm-6"> 
         <div class="service-item"> 
          <span class="fa-stack fa-4x"> 
          <i class="fa fa-circle fa-stack-2x"></i> 
          <i class="fa fa-shield fa-stack-1x text-primary"></i> 
         </span> 
          <h4> 
           <strong>Service Name</strong> 
          </h4> 
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
          <a href="#" class="btn btn-light">Learn More</a> 
         </div> 
        </div> 
       </div> 
       <!-- /.row (nested) --> 
      </div> 
      <!-- /.col-lg-10 --> 
     </div> 
     <!-- /.row --> 
    </div> 
    <!-- /.container --> 
</section> 

<!-- Callout --> 
<aside class="callout"> 
    <div class="text-vertical-center"> 
     <h1>Vertically Centered Text</h1> 
    </div> 
</aside> 

<!-- Portfolio --> 
<section id="portfolio" class="portfolio"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-10 col-lg-offset-1 text-center"> 
       <h2>Our Work</h2> 
       <hr class="small"> 
       <div class="row"> 
        <div class="col-md-6"> 
         <div class="portfolio-item"> 
          <a href="#"> 
           <img class="img-portfolio img-responsive" src="img/portfolio-1.jpg"> 
          </a> 
         </div> 
        </div> 
        <div class="col-md-6"> 
         <div class="portfolio-item"> 
          <a href="#"> 
           <img class="img-portfolio img-responsive" src="img/portfolio-2.jpg"> 
          </a> 
         </div> 
        </div> 
        <div class="col-md-6"> 
         <div class="portfolio-item"> 
          <a href="#"> 
           <img class="img-portfolio img-responsive" src="img/portfolio-3.jpg"> 
          </a> 
         </div> 
        </div> 
        <div class="col-md-6"> 
         <div class="portfolio-item"> 
          <a href="#"> 
           <img class="img-portfolio img-responsive" src="img/portfolio-4.jpg"> 
          </a> 
         </div> 
        </div> 
       </div> 
       <!-- /.row (nested) --> 
       <a href="#" class="btn btn-dark">View More Items</a> 
      </div> 
      <!-- /.col-lg-10 --> 
     </div> 
     <!-- /.row --> 
    </div> 
    <!-- /.container --> 
</section> 

<!-- Call to Action --> 
<aside class="call-to-action bg-primary"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-12 text-center"> 
       <h3>The buttons below are impossible to resist.</h3> 
       <a href="#" class="btn btn-lg btn-light">Click Me!</a> 
       <a href="#" class="btn btn-lg btn-dark">Look at Me!</a> 
      </div> 
     </div> 
    </div> 
</aside> 

<!-- Map --> 
<section id="contact" class="map"> 
    <iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&amp;aq=0&amp;oq=twitter&amp;sll=28.659344,-81.187888&amp;sspn=0.128789,0.264187&amp;ie=UTF8&amp;hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&amp;t=m&amp;z=15&amp;iwloc=A&amp;output=embed"></iframe> 
    <br /> 
    <small> 
     <a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&amp;aq=0&amp;oq=twitter&amp;sll=28.659344,-81.187888&amp;sspn=0.128789,0.264187&amp;ie=UTF8&amp;hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&amp;t=m&amp;z=15&amp;iwloc=A"></a> 
    </small> 
    </iframe> 
</section> 

<!-- Footer --> 
<footer> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-10 col-lg-offset-1 text-center"> 
       <h4><strong>Start Bootstrap</strong> 
       </h4> 
       <p>3481 Melrose Place<br>Beverly Hills, CA 90210</p> 
       <ul class="list-unstyled"> 
        <li><i class="fa fa-phone fa-fw"></i> (123) 456-7890</li> 
        <li><i class="fa fa-envelope-o fa-fw"></i> <a href="mailto:name@example.com">name@example.com</a> 
        </li> 
       </ul> 
       <br> 
       <ul class="list-inline"> 
        <li> 
         <a href="#"><i class="fa fa-facebook fa-fw fa-3x"></i></a> 
        </li> 
        <li> 
         <a href="#"><i class="fa fa-twitter fa-fw fa-3x"></i></a> 
        </li> 
        <li> 
         <a href="#"><i class="fa fa-dribbble fa-fw fa-3x"></i></a> 
        </li> 
       </ul> 
       <hr class="small"> 
       <p class="text-muted">Copyright &copy; Your Website 2014</p> 
      </div> 
     </div> 
    </div> 
</footer> 



// Closes the sidebar menu 
$("#menu-close").click(function(e) { 
    e.preventDefault(); 
    $("#sidebar-wrapper").toggleClass("active"); 
}); 

// Opens the sidebar menu 
$("#menu-toggle").click(function(e) { 
    e.preventDefault(); 
    $("#sidebar-wrapper").toggleClass("active"); 
}); 

// Scrolls to the selected menu item on the page 
$(function() { 
    $('a[href*=#]:not([href=#]):not([href=#myCarousel]):not([href="#myCarousel2])"').click(function() { 
     if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) { 

      var target = $(this.hash); 
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); 
      if (target.length) { 
       $('html,body').animate({ 
        scrollTop: target.offset().top 
       }, 1000); 
       return false; 
      } 
     } 
    }); 
}); 




.carousel-inner > .item > img, 
.carousel-inner > .item > a > img { 
    width: 100%; 
    margin: auto; 
    height: 100vh; 
    } 

.vcenter { 
    position: absolute; 
    height:100px; 
    width:100%; 
    top:50%; 
    bottom:50%; 
    margin-top: -50px; 
    margin-bottom: -50px; 
} 
.v-center { 
    position: absolute; 
    height:100px; 
    width:40%; 
    top:50%; 
    bottom:50%; 
    margin-top: -50px; 
    margin-bottom: -50px; 
    left:15%; 
}  

Answer 1

Вы можете добавить .img-responsive класс изображений и пусть Bootstrap масштабировать их соответствующим образом.

Таким образом, ваш тег будет выглядеть изображение:

<img class="img-responsive" src="http://lorempixel.com/460/345/business" /> 

Вы можете сделать это для всех изображений.

Ответные изображения автоматически регулируются в соответствии с размером экрана.

Answer 2

При применении height: 100vh; вы применяете определенную высоту ко всем изображениям. Таким образом, высота каруселей остается такой же. Но когда вы применяете height: auto;, тогда карусель использует оригинальную высоту изображения.

Другое, что я заметил, вы применяете width: 100%; к каждому изображению карусели. Если изображение имеет меньшие размеры, оно потеряет его качество.

Лучшим подходом было бы сохранить его автоматически и использовать изображения правильных размеров.