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

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

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

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

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

Ответ 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 из того же класса, потому что у вас установлен фиксированный navbar.

Ответ 2

Мне было лучше удалить следующее.

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

и в. carousel remove:

height: 500px;

и в .carousel.item remove

 height: 500px;

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

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

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

Ответ 3

что я закончил делать, добавлял 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>

Ответ 4

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

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