Автоматическое изменение размера изображения карусели с фиксированной высотой 500 пикселей и полной шириной

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

Вопрос: Как сделать изображения подходящими для карусели? Прямо сейчас они вырезаны снизу - см. Изображение (синяя линия) - но обратите внимание, что высота должна поддерживаться до 500 пикселей всегда, а изображение каруселя должно быть полностью шириной слева направо, как сейчас. Поэтому единственное, что нужно сделать, - это централизовать изображение. Как его отрезали на синем.

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

Вот как это выглядит в настоящее время:

код Carousel:

<div class="carousel slide" id="myCarousel"> 
     <div class="carousel-inner"> 
     <div class="item active"> 
      <img src="new/3.jpg"> 
      <div class="container"> 
      <div class="carousel-caption"> 
       <h1>Example headline.</h1> 
       <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
       <a class="btn btn-large btn-primary" href="#">Sign up today</a> 
      </div> 
      </div> 
     </div> 
     <div class="item"> 
      <img alt="" src="new/1.jpg"> 
      <div class="container"> 
      <div class="carousel-caption"> 
       <h1>Another example headline.</h1> 
       <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
       <a class="btn btn-large btn-primary" href="#">Learn more</a> 
      </div> 
      </div> 
     </div> 
     <div class="item"> 
      <img alt="" src="new/2.jpg"> 
      <div class="container"> 
      <div class="carousel-caption"> 
       <h1>One more for good measure.</h1> 
       <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
       <a class="btn btn-large btn-primary" href="#">Browse gallery</a> 
      </div> 
      </div> 
     </div> 
     </div> 
     <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> 
     <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> 
    </div><!-- /.carousel -->

Css код:

/* CUSTOMIZE THE CAROUSEL 
    -------------------------------------------------- */ 

    /* Carousel base class */ 
    .carousel { 
     margin-bottom: -90px;    /* odstep miedzy carusel slider a nastepnym containerem tzn O mnie */ 
    } 

    .carousel .container { 
     position: relative; 
     z-index: 9; 
    } 

    .carousel-control { 
     height: 80px; 
     margin-top: 0; 
     font-size: 120px; 
     text-shadow: 0 1px 1px rgba(0,0,0,.4); 
     background-color: transparent; 
     border: 0; 
     z-index: 10; 
    } 

    .carousel .item { 
     height: 550px; 
    } 
    .carousel img { 
     position: absolute; 
     top: 0; 
     left: 0; 
     min-width: 100%; 
     height: 500px; 
    } 

    .carousel-caption { 
     background-color: transparent; 
     position: static; 
     max-width: 550px; 
     padding: 0 20px; 
     margin-top: 200px; 
    } 
    .carousel-caption h1, 
    .carousel-caption .lead { 
     margin: 0; 
     line-height: 1.25; 
     color: #fff; 
     text-shadow: 0 1px 1px rgba(0,0,0,.4); 
    } 
    .carousel-caption .btn { 
     margin-top: 10px; 
    } 


    /* RESPONSIVE CSS 
    -------------------------------------------------- */ 

    @media (max-width: 979px) { 

     .carousel .item { 
     height: 500px; 
     } 
     .carousel img { 
     width: auto; 
     height: 500px; 
     } 

     .featurette { 
     height: auto; 
     padding: 0; 
     } 
     .featurette-image.pull-left, 
     .featurette-image.pull-right { 
     display: block; 
     float: none; 
     max-width: 40%; 
     margin: 0 auto 20px; 
     } 
    } 


    @media (max-width: 767px) { 

     .carousel { 
     margin-left: -20px; 
     margin-right: -20px; 
     } 
     .carousel .container { 

     } 
     .carousel .item { 
     height: 300px; 
     } 
     .carousel img { 
     height: 300px; 
     } 
     .carousel-caption { 
     width: 65%; 
     padding: 0 70px; 
     margin-top: 100px; 
     } 
     .carousel-caption h1 { 
     font-size: 30px; 
     } 
     .carousel-caption .lead, 
     .carousel-caption .btn { 
     font-size: 18px; 
     } 

     .marketing .span4 + .span4 { 
     margin-top: 40px; 
     } 

     .featurette-heading { 
     font-size: 30px; 
     } 
     .featurette .lead { 
     font-size: 18px; 
     line-height: 1.5; 
     } 

    }

ПОЗЖЕ .. Пытается .

Я пытался поиграть с этим, но неудачно, что я сделал, было изображение централизовано - но изображение не было полностью выровнено слева направо, а снизу к следующему элементу («Kilka slow ..») расстояние. Это был ниже код и выход:

Карусель:

<div class="container"> 
<div class="row"> 

<div class="bs-example"> 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
     <!-- 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> 
     </ol> 
     <!-- Carousel items --> 
     <div class="carousel-inner"> 
      <div class="active item"> 
       <div style="background:url(/images/1.jpg) center center; 
      background-size:cover;" class="slider-size"> 
    </div> 
      </div> 
      <div class="item"> 
       <div style="background:url(/images/2.jpg) center center; 
      background-size:cover;" class="slider-size"> 
    </div> 
      </div> 
      <div class="item"> 
       <div style="background:url(/images/3.jpg) center center; 
      background-size:cover;" class="slider-size"> 
    </div> 
      </div> 
     </div><!-- /.END CAROUSEL DIV --> 
    </div><!-- /.END MYCAROUSEL DIV --> 
</div><!-- /.END BSEXAMPLE --> 
</div> 
</div>

CSS:

/* CUSTOMIZE THE CAROUSEL 
    -------------------------------------------------- */ 

    /* Carousel base class */ 
    .carousel { 
     margin-bottom: -90px;    /* odstep miedzy carusel slider a nastepnym containerem tzn O mnie */ 
    } 

.slider-size { 
    height: 500px; 
} 

    .carousel .container { 
     position: relative; 
     z-index: 9; 
    } 

    .carousel-control { 
     height: 80px; 
     margin-top: 0; 
     font-size: 120px; 
     text-shadow: 0 1px 1px rgba(0,0,0,.4); 
     background-color: transparent; 
     border: 0; 
     z-index: 10; 
    } 

    .carousel .item { 
     height: 550px; 
    } 
    .carousel img { 
     position: absolute; 
     top: 0; 
     left: 0; 
     min-width: 100%; 
     height: 500px; 
    } 

    .carousel-caption { 
     background-color: transparent; 
     position: static; 
     max-width: 550px; 
     padding: 0 20px; 
     margin-top: 200px; 
    } 
    .carousel-caption h1, 
    .carousel-caption .lead { 
     margin: 0; 
     line-height: 1.25; 
     color: #fff; 
     text-shadow: 0 1px 1px rgba(0,0,0,.4); 
    } 
    .carousel-caption .btn { 
     margin-top: 10px; 
    } 


    /* RESPONSIVE CSS 
    -------------------------------------------------- */ 

    @media (max-width: 979px) { 

     .carousel .item { 
     height: 500px; 
     } 
     .carousel img { 
     width: auto; 
     height: 500px; 
     } 

     .featurette { 
     height: auto; 
     padding: 0; 
     } 
     .featurette-image.pull-left, 
     .featurette-image.pull-right { 
     display: block; 
     float: none; 
     max-width: 40%; 
     margin: 0 auto 20px; 
     } 
    } 


    @media (max-width: 767px) { 

     .carousel { 
     margin-left: -20px; 
     margin-right: -20px; 
     } 
     .carousel .container { 

     } 
     .carousel .item { 
     height: 300px; 
     } 
     .carousel img { 
     height: 300px; 
     } 
     .carousel-caption { 
     width: 65%; 
     padding: 0 70px; 
     margin-top: 100px; 
     } 
     .carousel-caption h1 { 
     font-size: 30px; 
     } 
     .carousel-caption .lead, 
     .carousel-caption .btn { 
     font-size: 18px; 
     } 

     .marketing .span4 + .span4 { 
     margin-top: 40px; 
     } 

     .featurette-heading { 
     font-size: 30px; 
     } 
     .featurette .lead { 
     font-size: 18px; 
     line-height: 1.5; 
     } 

    }

Предварительный просмотр:

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

источник

2015-07-24 Arie

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

<div class="item active" style="background-image: url('images/1.jpg')"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Example headline.</h1> 
      <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
      <a class="btn btn-large btn-primary" href="#">Sign up today</a> 
     </div> 
     </div> 
</div>

CSS

.item{ 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size:cover; 
}

EDIT ********

Я был бы признателен, если вы не просто провалить, когда я писал «что-то вроде это будет использоваться ». Вот скрипка с использованием слайдера, который я бы посоветовал использовать https://jsfiddle.net/tonytansley/c4n547at/. Я не 100% уверен, что вы после.

источник

2015-07-24 18:31:37

Я проверял, но не работал – Arie

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

Автоматическое изменение размера изображения карусели с фиксированной высотой 500 пикселей и полной шириной

ответ

Смежные вопросы