Как масштабировать кастрюль каретки в обоих направлениях и иметь максимальную высоту?

Question

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

Эффект Я ищу похож на то, что можно найти здесь: https://bootstrapious.com/tutorial/carousel/fullscreen.html

Как вы можете видеть, как изменить ширину окна Browswer, изображения шкал и, как вы получите очень широкий браузера, изображение будет «увеличено», чтобы сохранить соотношение сторон. Однако в этом примере используется тег carousel-fullscreen. Это заставляет карусель снимать весь экран, независимо от размера окна. Я хочу, чтобы можно было установить жесткий предел в max-height: 700px, а затем иметь тот же эффект, когда изображение все еще масштабируется и масштабируется, когда браузер очень большой.

Я также попытался использовать предложение в других вопросах, чтобы поместить изображение в div, а затем использовать background-image (...) и background-size: cover, но до сих пор не смог получить эффект. Я находясь в поиске.

Вот моя текущая реализация: https://jsfiddle.net/hildet/yvkcLh1q/2/

Если установить максимальную высоту-, когда оно будет достигнуто изображение затем просто растягивается в ширину и высоту останавливается.

/* CSS */ 
 

 
.item img { 
 
    width: 100%; 
 
    height: auto 
 
} 
 

 
.carousel-inner img { 
 
    width: 100%; 
 
    margin: auto; 
 
    max-height: 300px; 
 
}

<!-- HTML --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img src="http://i.imgur.com/Vw04Buz.jpg" alt="Slide 1"> 
 
     <div class="carousel-caption"> 
 
     Caption Slide 1 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://i.imgur.com/Vw04Buz.jpg" alt="Slide 2"> 
 
     <div class="carousel-caption"> 
 
     Caption Slide 2 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://i.imgur.com/Vw04Buz.jpg" alt="Slide 3"> 
 
     <div class="carousel-caption"> 
 
     Caption Slide 3 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div>

Эффект можно увидеть, когда вы перетащите окно и выход.

Если вам необходимо уточнить, что я ищу, пожалуйста, дайте мне знать.

Answer 1

После попытки различных решений, которые я нашел в Интернете, я смог придумать решение того, что я искал. Оказывается, это было очень простое решение.

Это обновленный CSS, который я использовал:

.container-fluid { 
    padding: 80px 120px;  
} 

.carousel .item { 
    max-height: 300px; 
} 

.carousel-inner img { 
    width: 100%; 
} 

.carousel-caption h3 { 
    color: #fff !important; 
} 

.carousel-caption { 
    top: 40%; 
} 

В этом теперь аффект изображение не растягивается, когда экран очень широк. Вместо этого изображение поддерживает его соотношение и «масштабирование», так что часть нижней части изображения больше не видна. Кроме того, с этим исправлением я смог получить заголовок, чтобы он оставался вертикально центрированным.

Вот обновленный Fiddle рабочего кода: https://jsfiddle.net/hildet/y12b3bxc/

Answer 2

Я надеюсь, что это сработает для вас. Если вам нужна помощь, прокомментируйте!

.item img {width: 100%; min-height: 100%;} 

.carousel-inner img { 
    width: 100%;  
    margin: auto; 
    min-height: 100vh; 
}