title: Landscape and portrait images into bootstrap carousel: height and width in responsive layout
body: <p>I have a number of images: landscape images are 1024*682px and portrait images are 685*1024px. As you might imagine, throwing a mix of them into a bootstrap carousel causes the carousel height to change as the images slide. In order to prevent this as well as center the portrait oriented images in the carousel, I've put in the following css:</p>
  
  <pre><code>.carousel-inner .item img {
      max-height: 682px;
      height: auto;
      width: auto;
      display: block;
      margin-left: auto;
      margin-right: auto;
  }
  </code></pre>
  
  <p>This seems to work as intended until the viewable area becomes roughly smaller than the landscape image width (1024px). At this point, the height of the image remains (proportionally) constant but scales the width of the image so that it loses the aspect ratio. What do I need to do to the <code>css</code> to prevent the width scaling but maintain responsive scaling and a max-height of 682px?</p>