Размер картинки в bootstrap

343

26 ноября 2016, 18:51

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

Вот код:

<div class="carousel-inner">
            <div class="item active">
                <img width="2000" height="800" class="cerousel-imeges" src="images/universe.jpg" alt="">
            </div>
            <div class="item">
                <img width="2000" height="800" class="cerousel-imeges" src="images/universe2.jpg" alt="">
            </div>
            <div class="item">
                <img src="images/universe3.jpg" alt="">
            </div>
</div>

Может лучше задать им какой-нибудь класс и вынести отдельно в файла style.css ? Я пробовал - у меня не получается так. Не могли бы вы показать как это делается ?

Помимо всего сдвигаются кнопки выбора нужной картинки в самый низ страницы.

Answer 1

Добавить height: 800px !important; если нужно именно так.

Например:

.carousel-inner img { 
  display: block; 
  width: 600px; 
  height: 350px !important; 
  margin: 0 auto; 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
 
 
 
 
<div class="container"> 
  <!-- Слайдер --> 
  <div id="carousel" class="carousel slide"> 
    <!-- Индикаторы слайдов --> 
    <ol class="carousel-indicators"> 
      <!-- Активный индикатор--> 
      <li class="active" data-target="#carousel" data-slide-to="0"></li> 
      <!-- Неактивные индикаторы --> 
      <li data-target="#carousel" data-slide-to="1"></li> 
      <li data-target="#carousel" data-slide-to="2"></li> 
    </ol> 
 
    <!-- Слайды --> 
    <div class="carousel-inner"> 
 
      <div class="item active"> 
       <img src="http://economictimes.indiatimes.com/thumb/msid-50941625,width-640,resizemode-4/mughal-gardens-in-full-bloom.jpg" alt=""> 
        <div class="carousel-caption"> 
          <h3>Первый слайд</h3> 
          <p>Описание первого слайда</p> 
        </div> 
      </div> 
 
      <div class="item"> 
         <img src="http://media.gettyimages.com/photos/cosmos-flowers-in-full-bloom-picture-id467213949?k=6&m=467213949&s=170667a&w=0&h=y5trnQg5YGRZ8hiJQdpHW3fI2QsyPk547IslOsA2zuQ=" alt=""> 
        <div class="carousel-caption"> 
          <h3>Второй слайд</h3> 
          <p>Описание первого слайда</p> 
        </div> 
      </div> 
 
      <div class="item"> 
        <img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt=""> 
        <div class="carousel-caption"> 
          <h3>Третий слайд</h3> 
          <p>Описание первого слайда</p> 
        </div> 
      </div> 
 
    </div> 
 
    <!-- Стрелки переключения слайдов --> 
    <a class="left carousel-control" href="#carousel" role="button" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
      <span class="sr-only">Previous</span> 
    </a> 
 
    <a class="right carousel-control" href="#carousel" role="button" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
      <span class="sr-only">Next</span> 
    </a> 
</div> 
     
</div>

Или, на всякий случай, вариант с фоновыми картинками (чтобы изображения более красиво выглядели):

.item-img { 
  width: 600px;  
  height: 350px;  
  background-repeat: no-rpeat; 
  background-position: center; 
  -webkit-background-size: cover;  
  background-size: cover;  
  margin: 0 auto; 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
 
 
<div class="container"> 
  <!-- Слайдер --> 
  <div id="carousel" class="carousel slide"> 
    <!-- Индикаторы слайдов --> 
    <ol class="carousel-indicators"> 
      <!-- Активный индикатор--> 
      <li class="active" data-target="#carousel" data-slide-to="0"></li> 
      <!-- Неактивные индикаторы --> 
      <li data-target="#carousel" data-slide-to="1"></li> 
      <li data-target="#carousel" data-slide-to="2"></li> 
    </ol> 
 
    <!-- Слайды --> 
    <div class="carousel-inner"> 
 
      <div class="item active"> 
        <div class="item-img" style="background-image: url(http://economictimes.indiatimes.com/thumb/msid-50941625,width-640,resizemode-4/mughal-gardens-in-full-bloom.jpg);"></div> 
        <!-- <img src="http://economictimes.indiatimes.com/thumb/msid-50941625,width-640,resizemode-4/mughal-gardens-in-full-bloom.jpg" alt=""> --> 
        <div class="carousel-caption"> 
          <h3>Первый слайд</h3> 
          <p>Описание первого слайда</p> 
        </div> 
      </div> 
 
      <div class="item"> 
         <div class="item-img" style="background-image: url(http://media.gettyimages.com/photos/cosmos-flowers-in-full-bloom-picture-id467213949?k=6&m=467213949&s=170667a&w=0&h=y5trnQg5YGRZ8hiJQdpHW3fI2QsyPk547IslOsA2zuQ="></div> 
       <!--  <img src="http://media.gettyimages.com/photos/cosmos-flowers-in-full-bloom-picture-id467213949?k=6&m=467213949&s=170667a&w=0&h=y5trnQg5YGRZ8hiJQdpHW3fI2QsyPk547IslOsA2zuQ=" alt=""> --> 
        <div class="carousel-caption"> 
          <h3>Второй слайд</h3> 
          <p>Описание первого слайда</p> 
        </div> 
      </div> 
 
      <div class="item"> 
         <div class="item-img" style="background-image: url(http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"></div> 
       <!--  <img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt=""> --> 
        <div class="carousel-caption"> 
          <h3>Третий слайд</h3> 
          <p>Описание первого слайда</p> 
        </div> 
      </div> 
 
    </div> 
 
    <!-- Стрелки переключения слайдов --> 
    <a class="left carousel-control" href="#carousel" role="button" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
      <span class="sr-only">Previous</span> 
    </a> 
 
    <a class="right carousel-control" href="#carousel" role="button" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
      <span class="sr-only">Next</span> 
    </a> 
</div> 
     
</div>