Как сделать загрузочное изображение карусели?

Question

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

Я проверил все вопросы здесь, но большинство из них мне не помогло.

Вот разметка:

<!-- Carousel 
================================================== --> 
<div id="myCarousel" class="carousel slide" data-ride="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> 
    <div class="carousel-inner"> 
    <div class="item active"> 
     <img src="images/female/IMG_5053-2.jpg" 
      data-src="images/female/IMG_5053-2.jpg" alt="First slide"> 

---

и вот CSS

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

Я попытался сделать jsfiddle, но я не смог здесь ссылка на страница http://maanastore.com/home.php

Answer 1

Удалите следующие правила CSS из соответствующих файлов:

В home.php файле

.carousel .item>img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    max-width: 100%; 
    height: 100%; 
} 

в carousel.css

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

Кроме того, добавьте margin-top: 51px; в .carousel класс в файле carousel.css и удалите height:500px из того же класса, потому что у вас установлен фиксированный навигатор.

Answer 2

Я нашел, что лучше удалить следующее.

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

и .carousel REMOVE:

height: 500px; 

и .carousel .item удалить

height: 500px; 

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

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

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

Answer 3

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

.carousel-inner > .carousel-item > img { 
margin: 0; //If you have images of very different sizes.  
max-width: 100%; } 

Answer 4

, что я в конечном итоге делает добавлял в DIV внутри то есть изображение фона в DIV, как реагировать

<div class="carousel-inner" role="listbox"> 
    <div class="carousel-item active"> 
     <div class="img1"> 
     </div> 
<!--<img class=" imgCstm " src="images/home/bng_00.jpg" alt="First slide">--> 
    </div> 
</div> 


<style> 
    .carousel-inner { 
    height: 100vh; 
    <! -- custom hight --> 
    } 

    .carousel-item { 
    height: 100%; 
    } 

    .img1 { 
    background-image: url('../images/home/bng_00.jpg'); 
    height: 100%; 
    width: 100%; 
    background-repeat: no-repeat; 
    background-attachment: fixed !important; 
    background-size: cover !important; 
    background-position: center !important; 
    } 
</style>