медиазапросы в начальной загрузке карусели - PullRequest
Новая
       11

медиазапросы в начальной загрузке карусели

0 голосов
/ 25 апреля 2019

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

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="item active">
      <img src="imagehere.png">
    </div>

    <div class="item">
      <img src="imagehere.png">
    </div>

    <div class="item">
      <img src="imagehere.png">
    </div>
  </div>
  </div>

1 Ответ

1 голос
/ 25 апреля 2019

Нет, вам не нужно добавлять медиа-запросы. Установите ширину изображения на 100%. Присвойте каждому изображению класс img-Fluid и установите для своего поля значение 0

. 
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
    <div class="item active">
        <img class="img-fluid" src="https://images.unsplash.com/photo-1472722886393-f2f51e9deec8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
            width="100%" height="100%">

    </div>

    <div class="item">
        <img class="img-fluid" src="https://images.unsplash.com/photo-1531682607150-08b2476a545a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=742&q=80"
            width="100%" height="100%">

    </div>

    <div class="item">
        <img class="img-fluid" src="https://images.unsplash.com/photo-1498595664159-2df8dee7e63c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
            width="100%" height="100%">
    </div>
</div>

...