Изображение не подходит для начальной загрузки карусели - PullRequest
Новая
       30

Изображение не подходит для начальной загрузки карусели

0 голосов
/ 02 мая 2018

Я почти закончил создание сайта, но я борюсь с каруселью.

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

Не прав ли я, полагая, что после игнорирования медиазапросов браузер должен использовать CSS, который не находится внутри блока медиазапросов?

Стандартный CSS 

.carousel-indicators li{
    border-radius: 12px;
    width: 14px;
    height: 14px;
}
.carousel-inner{
    width: auto;
    height: 1000px;
}
.carousel-inner img{
    width: 100%;
    height: 100%;
}
}

@media (max-width: 575.98px) {
.carousel-inner{
    width: 100%;
    height: 450px;
}
.carousel-inner img{
    width: auto;
    height: 450px;
    padding-top: 80px;
    transform: translateX(-5rem);
}
}

@media (min-width: 576px) {
.carousel-inner{
    width: 100%;
    height: 450px;
}
.carousel-inner img{
    width: auto;
    height: 450px;
    padding-top: 80px;
    transform: translateX(-5rem);
}
}

@media (min-width: 768px) {
.carousel-inner{
    width: 100%;
    height: 450px;
}
.carousel-inner img{
    width: auto;
    height: 450px;
    padding-top: 80px;
    transform: translateX(-5rem);
}
}
@media (min-width: 992px) {
.carousel-inner{
    width: 100%;
    height: 600px;
}
.carousel-inner img{
    width: auto;
    height: 600px;
    padding-top: 80px;
}
}
@media (min-width: 1200px) {
.carousel-inner{
    width: 100%;
    height: 600px;
}
.carousel-inner img{
    width: auto;
    height: 600px;
    padding-top: 80px;
}
}


<!-- Image SLider & Indicators -->
 <div id="slides" class="carousel slide" data-ride="carousel">
    <ul class="carousel-indicators">
      <li data-target="#slides" data-slide-to="0" class="active"></li>
      <li data-target="#slides" data-slide-to="1"></li>
      <li data-target="#slides" data-slide-to="2"></li>
    </ul>
  <div class="carousel-inner" id="home">
    <div class="carousel-item active">
      <img src="img/warm.jpg">
    </div>
     <div class="carousel-item">
      <img src="img/landscape2.jpg">
    </div>
     <div class="carousel-item">
      <img src="img/river.jpeg">
    </div>
    <div class="carousel-caption">
      <h1 class="display-2">ALIAS PHOTOGRAPHY</h1>
        <h3>My Journey Through Nature...</h3>
        <div class="showcase-buttons">
        <!-- <button type="button" class="btn btn-outline-light btn-lg mr-1">VIEW DEMO</button> -->
        <a href="#gallery"><button type="button" class="btn btn-primary btn-lg">VIEW GALLERY</button></a>
        </div>
      </div>
  </div>

1 Ответ

0 голосов
/ 03 мая 2018

Проблема не в медиа-запросах, а в том, что вы устанавливаете высоту изображений в 600 пикселей. Это ограничивает их пропорциональность росту. Если вы хотите использовать изображения полной ширины, попробуйте использовать div с background-images.

...