Пунктирная надпись над изображением для масштабирования при изменении размера карусели бутстрапа

Question

У меня есть карусель для начальной загрузки и пунктирная надпись над ним.

Демо здесь: http://jsfiddle.net/r4x99ecf/

HTML:

<div class="banner"> 
    <div class="carousel slide"> 
     <div class="carousel-inner"> 
      <div class="item active"><img src="http://i.imgur.com/8hAR6s4.jpg" /></div> 
      <div class="item"><img src="http://i.imgur.com/BPSXgEp.jpg" /></div> 
      <div class="item"><img src="http://i.imgur.com/Vk1Y6v0.jpg" /></div> 
     </div> 
     <div class="overlay"></div> 
    </div> 
</div> 
<script>$(".carousel").carousel();</script> 

CSS:

.carousel, .carousel-inner { 
    height: 350px; 
} 

.overlay { 
    background: transparent url("http://i.imgur.com/8B7UFiv.png") repeat; 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
} 

Моя проблема в том, если вы уменьшить размер окна, ширина снимков будет уменьшаться. Изображения сохраняют соотношение сторон, так что высота также уменьшается. Но наложение имеет одинаковую высоту.

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

Answer 1

Вы должны использовать max-height свойство, чтобы предотвратить такое поведение

.carousel, .carousel-inner { 
    max-height: 350px; 
} 

Таким образом, вы присваивая height, скажем, максимум 350px. Использование height: 350px; исправляет height для этого конкретного элемента, который впоследствии приводит к переполнению оверлейного изображения.

Demo

Answer 2

Комментарий или удалить следующие части CSS

.carousel, .carousel-inner { 
    height: 350px; 
} 

Answer 3

DEMO

.carsoul{height:100%; width:100%} 
.carousel, .carousel-inner { 
    height: 100%; 
} 

.overlay { 
    background: transparent url("http://i.imgur.com/8B7UFiv.png") repeat; 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
} 

Answer 4

Попробуйте это ..

.carousel { 
     height: 100%; 
     width : 100%; 
} 

& Удалить ваш предыдущего код

(.carousel, .carousel-inner { 
    height: 350px; 
}) 

Надеется, что это будет хорошо работает для вас !!