it-swarm.com.ru

Bootstrap 3 отзывчивых изображения бок о бок одинаковой высоты

Можно ли использовать 2 адаптивных изображения рядом с одинаковой высотой с Bootstrap 3 ? На данный момент col-sm-4 не имеет такую ​​же высоту.

<div class="container">
    <div class="row">                                     
        <div class="col-sm-4">                 
            <img class="img-responsive" src="http://placehold.it/400x400" />
        </div>                  
        <div class="col-sm-8">
            <img class="img-responsive" src="http://placehold.it/800x400" />
        </div>                  
    </div>
</div>

Demo Fiddle:http://jsfiddle.net/u9av6/3/

Спасибо!

22
l00per

попробуй это:

<div class="col-sm-4"><img src="http://placehold.it/400x400" height="220" /></div>

<div class="col-sm-8"><img src="http://placehold.it/800x400" height="220" /></div>
14
wpdaniel

вот мое решение с простой оберткой. Идея состоит в том, чтобы иметь дело с аспектным соотношением:

jsfiddleдемо

6
foxdie

Вот рабочая версия, с jsfiddle demo .

<div class="col-sm-4"><img style="max-height:220px" src="http://placehold.it/400x400" /></div>                       
<div class="col-sm-8"><img style="max-height:220px" src="http://placehold.it/800x400" /></div>
3
wpdaniel

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

Ваши 400px и 800px хороши, но с учетом заполнения это не хорошо. 

В этой скрипке: http://jsfiddle.net/Lrc5t/1/ без заполнения они сохраняют одинаковую высоту. Но это не приятно без подкладки ...

Заполнение в каждом .row равно 15px слева и справа.

html: 

<div class="row">                   
    <div class="col-sm-4 nopadding"><img class="img-responsive" src="http://placehold.it/400x400"></div>                       
    <div class="col-sm-8 nopadding"><img class="img-responsive" src="http://placehold.it/800x400"></div>              
</div>

css:

.nopadding{
    padding-left: 0px !important;
    padding-right:0px !important;    
}

Обновление : 

fiddle: http://jsfiddle.net/Lrc5t/2/

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

<div class="row">

<div class="col-sm-4"><img class="img-responsive" src="http://placehold.it/400x400"></div>

<div class="col-sm-8 nopadding-two"><img class="img-responsive" src="http://placehold.it/800x400"></div>

</div>

.nopadding-two{
    padding-right:45px !important;
}

ps: вы можете добавить дополнение слева или справа ..., чтобы заполнение находилось посередине. И ... nopadding-one и text-right класс нужно удалить ... (я забыл) ...

ОБНОВЛЕНИЕ ПОСЛЕ КОММЕНТАРИИ: * Почему 45px? *Изображение 1 с плавающей запятой: слева, поэтому имеет только отступ справа на 15px Image 2 имеет отступы влево и вправо в 15px {= 30px} Поэтому, чтобы сделать равенство (чтобы получить те же ограничения), вам нужно передать общее заполнение на изображение 2

1
Pimento Web

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

<script>
   setTimeout(function () {
      equalheight('.portfolio-item');
   }, 3000);
   function equalheight($that) {
      $minHeight = 0;
      $($that).each(function (index) {
         $thisHeight = $(this).children('.portfolio-link').innerHeight();
         if ($minHeight == 0) {
            $minHeight = $thisHeight;
         } else {
            if ($minHeight > $thisHeight) {
               $minHeight = $thisHeight;
            }
         }
      });
      $($that).children('.portfolio-link').css('max-height', $minHeight);
      $($that).children('.portfolio-link').css('overflow', 'hidden');
   }
</script>

Мой HTML 

                <div class="col-md-4 col-sm-6 portfolio-item">
                  <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal" style="max-height: 225px; overflow: hidden;">
                     <div class="portfolio-hover">
                        <div class="portfolio-hover-content">
                           <i class="fa fa-plus fa-3x"></i>
                        </div>
                     </div>
                     <img src="images/trip-01.jpg" class="img-responsive" alt="">
                  </a>
                  <div class="portfolio-caption">
                     <h4>Round Icons</h4>
                     <p class="text-muted">Graphic Design</p>
                  </div>
               </div>
               <div class="col-md-4 col-sm-6 portfolio-item">
                  <a href="#portfolioModal2" class="portfolio-link" data-toggle="modal" style="max-height: 225px; overflow: hidden;">
                     <div class="portfolio-hover">
                        <div class="portfolio-hover-content">
                           <i class="fa fa-plus fa-3x"></i>
                        </div>
                     </div>
                     <img src="images/trip-02.jpg" class="img-responsive" alt="">
                  </a>
                  <div class="portfolio-caption">
                     <h4>Startup Framework</h4>
                     <p class="text-muted">Website Design</p>
                  </div>
               </div>
0
Eugine Joseph

Чтобы изображения отображались рядом, вам нужно сделать три вещи:

1-й : сделать все ваши изображения отзывчивыми в html-файле следующим образом: 

<div class="row">

      <div class="col-xs-3 left-image"  >

        <img  class="img-responsive" src="../img/fourthimg.jpg">
      </div>
      <div class="col-xs-9 right-image">

          <img class="img-responsive" src="../img/firstimg.jpg" >

     </div>

    </div>

Это для размещения двух изображений рядом. Вы можете иметь как можно больше изображений.

2-й: Внутри вашего CSS, дать высоту для этих изображений, как это:

   .img-responsive {display:block; height: 600px; width: 100%;}

Ширина установлена ​​на 100%, что означает, что оба (для этого примера)/все изображения будут покрывать 100% часть ширины столбца, предоставленной в вашем HTML-коде.

3-й (наиболее важный): CSS имеет это свойство, чтобы автоматически оставлять поля/отступы справа и слева, когда вы помещаете изображение в div, и этот отступ связан с изображением или любым другим элементом, который вы хотите поместить внутри деление 

Чтобы справиться с этим, перейдите к вашему css-файлу и для каждого изображения установите отступы слева и справа в 0px, вот так:

.right-image{
padding-left:0px;
padding-right:0px;

}


.left-image{

 padding-right: 0px;
 padding-left: 0px;


}

Это рабочий пример и объяснение того, как вставлять изображения рядом с помощью начальной загрузки!

0
Shubham

если вам нужна постоянная высота, следует добавить следующие свойства:

height: 200x ;   # any constant height
object-fit: cover;

Или же вам нужна постоянная ширина, следует добавить эти свойства:

width: 200px ;  # any constant height
object-fit: cover;

object-fit: cover, исправлена ​​проблема растягивания изображения в моем случае.

0
vikas0713