Offseting изображения по вертикали на карусели

Question

Так я искал к решению для следующего вопроса:

Бутстрап карусельного способен расширяться изображение, чтобы соответствовать с контейнера. Это все прекрасно и денди. Проблема возникает, когда у вас есть изображения с разной высотой.

Карусель расширит высоту контейнера, чтобы поместить изображение, которое может быть исправлено с:

.container.banner .carousel-inner { 
    height:500px; 
} 

Теперь вопрос приходит, когда я пытаюсь компенсировать изображение таким образом, вы можете видеть середину вместо вершина. Я имею в виду, так как все изображения будут иметь разную высоту, мне нужно будет переместить что-то внутри тега <img> в начало.

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

so tl; dr: Как сместить изображение X в вертикальной плоскости внутри карусели.

вот мой код: HTML:

<div class="container banner"> 
    <div id="myCarousel" class="carousel slide"> 
     <div class="carousel-inner"> 
      <div class="active item"> 
       <img src="img/carousel/Carousel.jpg" alt=""> 
      </div> 
      <div class="item"> 
       <img src="img/carousel/Carousel (2).jpg" alt=""> 
      </div> 
      <div class="item"> 
       <img src="img/carousel/Carousel (3).jpg" alt=""> 
      </div> 
     </div> 
     <!-- Carousel nav --> 
     <a class="carousel-control left" href="#myCarousel" 
      data-slide="prev">&lsaquo;</a> 
     <a class="carousel-control right" href="#myCarousel" 
      data-slide="next">&rsaquo;</a> 
    </div> 
</div> 

Css

.container.banner .carousel-inner { 
    height:500px; 
} 
.container.banner .carousel-inner img{ 
    /*something to move the image*/ 
    /*top:5px; This doesnt work dynamically, percentage doesnt react*/ 

} 

EDIT:

Ну, если вы сделаете следующее:

.container.banner .carousel-inner .item{ 
    position:relative; 
    width:100%; 
    bottom: 47%; 
} 
.container.banner .carousel-inner .item img{ 
    width:100%; 
} 

Вы получаете что-то вроде решения, но! в зависимости от изображения он может переходить к большому или к малому. В идеале центр изображения должен находиться в середине карусели. И здесь лежит мой текущий вопрос ...

Изменить 2: Ответ

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

<script type="text/javascript"> 
$(document).ready(function() { 
    $(".container.banner .carousel-inner .item").each(function(index) { 

     $(this).css("margin-top",-(($(this).height())/4) + 'px'); 
    } 
)}); 
</script> 

Добавление этого к концу HTML позволит объекта «по центру» вертикально на карусели, независимо от высоты изображения могли бы иметь. Также не забудьте установить ширину тега <img> на 100% в соответствии с исходным сообщением.

и окончательный комментарий: Приобретите решение @bleuscyther для решения.

Answer 1

вы можете установить максимальную высоту изображения

.container.banner .carousel-inner .item img{ 

    max-height :500px 

} 

может быть, после того, как вы хотите, чтобы центр изображения, если иметь ширину Фикс для.карусельного-внутренний пример:

.container.banner .carousel-inner { 
width :900px 
} 
.container.banner .carousel-inner .item img{ 
max-width: 900px; 
margin: 0 auto; 
} 

Редактировать

, если вы действительно хотите, чтобы изображение, чтобы соответствовать Используя предыдущий CSS + это:

img { 
    position: absolute; 
    top: 50%; 
    left: 50%; 

} 

и немного JQuery

в нижней части страницы:

<script> 

$(document).ready(function() { 
$(".container.banner .carousel-inner .item img").each(function(index) { 

    X= $(this).width() 
    Y= $(this).height() 
    margin_left = -(X/2); 
    margin_top = -(Y/2); 

    $(this).css("margin-left",margin_left + 'px'); 
    $(this).css("margin-top",margin_top + 'px'); 
}; 

)}; 

</script> 

можно уплотнить код, если он работает, и вы получите логику:

$(this).css("margin-left",-(($(this).width())/2) + 'px');