Bootstrap Carousel Изображение Не Горизонтально по центру

Question

Это мой код:

<style> 
    .carousel-inner > .item > img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    min-height: 510px; 
    max-width: none; 
    } 
</style> 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <div style="background-color: red;" class="slider col-lg-10"> 
    <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
     <img class="first-slide img-responsive center-block" src="assets/img/underconstruction.jpg" alt="First slide"> 
     <div class="container"> 
      <div class="carousel-caption"> 
      <h1>Example headline.</h1> 
      <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p> 
      <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p> 
      </div><!-- carousel-caption --> 
     </div><!-- container --> 
     </div><!-- item active --> 
     <div class="item"> 
     <img class="second-slide" src="assets/img/underconstruction.jpg" alt="Second slide"> 
     <div class="container"> 
      <div class="carousel-caption"> 
      <h1>Another example headline.</h1> 
      <p>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> 
      <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p> 
      </div><!-- carousel-caption --> 
     </div><!-- container --> 
     </div><!-- item --> 
     <div class="item"> 
     <img class="third-slide" src="assets/img/underconstruction.jpg" alt="Third slide"> 
     <div class="container"> 
      <div class="carousel-caption"> 
      <h1>One more for good measure.</h1> 
      <p>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> 
      <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p> 
      </div><!-- carousel-caption --> 
     </div><!-- container --> 
     </div><!-- item --> 
    </div><!-- carousel-inner --> 
    </div><!-- slider col-lg-10 --> 

    <div data-target="#myCarousel" data-slide-to="0" style="background-color: blue;" class="tabs-vertical col-lg-2 visible-lg">TAB 1</div> 
    <div data-target="#myCarousel" data-slide-to="1" style="background-color: yellow;" class="tabs-vertical col-lg-2 visible-lg">TAB 2</div> 
    <div data-target="#myCarousel" data-slide-to="2" style="background-color: cyan;" class="tabs-vertical col-lg-2 visible-lg">TAB 3</div> 

    <div data-target="#myCarousel" data-slide-to="0" style="background-color: blue;" class="tabs-horizontal col-xs-4 hidden-lg">TAB 1</div> 
    <div data-target="#myCarousel" data-slide-to="1" style="background-color: yellow;" class="tabs-horizontal col-xs-4 hidden-lg">TAB 2</div> 
    <div data-target="#myCarousel" data-slide-to="2" style="background-color: cyan;" class="tabs-horizontal col-xs-4 hidden-lg">TAB 3</div> 
</div><!-- carousel slide --> 

мне удалось получить это на широком экране:

и это на узкий экран:

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

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

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

Я вижу некоторое решение по маржи, но это не помогает.

Я попытался установить ширину, она центрирована, но она не заполняет верхнюю и нижнюю части карусели. А также он становится маленьким в узком экране.

Answer 1

Вы можете установить изображение как css background-image из div вместо использования тега img. Затем установите background-size: cover;:

div { 
    background-image: url(path/to/img/relative/to/css); 
    background-size: cover; 
    background-position: 50%; 
} 

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

Вот пример: http://jsbin.com/jayacopoga/1/edit?html,css,js,output

Answer 2

Бутстрап карусель изображений центрирования, работает в Bootstrap 3 и 4-альфа. Все, что нужно, это добавить стиль text-align:center; в пункт div, который вы хотите сосредоточить на карусели. Остальные выровнятся влево.

Это центр изображения и не меняет его размер. Если вам нужно заполнить всю панель карусели изображением, просто измените ширину изображения на 100%, и она будет заполняться и центрироваться в результате (см. Третье изображение в коде ниже).

Это пример карусели непосредственно из бутстрапа 4 alpha. Дополнительный стиль - это все, что необходимо для центрирования изображения (добавление класса «center» в div div карусели в этом случае) и может быть достигнуто с использованием различных методов.

http://v4-alpha.getbootstrap.com/components/carousel/

<style> .center { text-align:center; } </style> 


<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
    <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> 
    <div class="carousel-inner" role="listbox"> 
    <div class="carousel-item active center"> 
     <img src="http://placeimg.com/200/200/tech" alt="First slide"> 
    </div> 
    <div class="carousel-item"> 
     <img src="http://placeimg.com/200/200/nature" alt="Second slide"> 
    </div> 
    <div class="carousel-item"> 
     <img style="width:100%;" src="http://placeimg.com/200/200/people" alt="Third slide"> 
    </div> 
    </div> 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
    <span class="icon-prev" 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="icon-next" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
    </a> 
</div>