it-roy-ru.com

Как сделать загрузочный образ карусели отзывчивым?

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

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

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

<!-- 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

16
user3205189

Удалите следующие правила 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 из того же класса, потому что вы исправили панель навигации.

11
Ravimallya

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

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

и в .carousel удалить:

height: 500px;

и в . карусель .item удалить

 height: 500px;

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

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

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

то, что я в конечном итоге делал, это добавление 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>
1
oldman

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

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

Я сделал эти настройки для bootstrap.css в строках 5835 - 5847:

.carousel-inner {
  position: relative;
  /* Removed height here */
  overflow: hidden;
}

.carousel-item {
  position: relative;
  width: 100vh;
  height: 100vh;
  display: none;
  width: 100%;
}

Работал как чемпион!

0
gvbaker55