Bootstrap: адаптивное выравнивание изображения

Question

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

<div class="col-3">
    <img src="..." class="w-100" />
    <div>Name</div>
</div>

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

Другими словами, когда изображение в пределах .col имеет ширину 200 пикселей, оно должно иметь высоту 200 пикселей и т. д. (ширина = высота).

Answer 1

Пример 1 с использованием css:

@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css');

.img-prev {
  height: 200px;
  overflow: hidden;
}

.img-prev img {
  max-height: 100%;
  width: auto;
  max-width: inherit;
  margin: auto;
  display: block;
}

<div class="container">
    <div class="row">
      <div class="col-4 mb-2">
        <div class="img-prev">
          <img src="https://images.unsplash.com/photo-1538356913997-b04286765811?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=39e83600a508d87be2ea636e02f30f95&auto=format&fit=crop&w=600&q=60" alt="" class="img-fluid">
        </div>
      </div>
      
      <div class="col-4 mb-2">
        <div class="img-prev">
          <img src="https://images.unsplash.com/photo-1538333785596-1cc0b5e03551?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c942fc493dad02801a99aa191414a535&auto=format&fit=crop&w=600&q=60" alt="" class="img-fluid">
        </div>
      </div>
      
      <div class="col-4 mb-2">
        <div class="img-prev">
          <img src="https://images.unsplash.com/photo-1538379585867-44bf200a3d25?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=29782178fb2019f60bee12c2fcfacff4&auto=format&fit=crop&w=600&q=60" alt="" class="img-fluid">
        </div>
      </div>
      
      <div class="col-4 mb-2">
        <div class="img-prev">
          <img src="https://images.unsplash.com/photo-1538367735494-5e6cc0ff555a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3066861f0cf81849de20853676dee717&auto=format&fit=crop&w=600&q=60" alt="" class="img-fluid">
        </div>
      </div>
    </div>
  </div>

Пример 2 html:

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  
  <div class="container">
    <div class="row">
      <div class="col-4 mb-2">
        <div class="img-prev">
          <img src="https://images.unsplash.com/photo-1538356913997-b04286765811?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=39e83600a508d87be2ea636e02f30f95&auto=format&fit=crop&w=600&q=60" alt="" height="200" width="150">
        </div>
      </div>
      
      <div class="col-4 mb-2">
        <div class="img-prev">
          <img src="https://images.unsplash.com/photo-1538333785596-1cc0b5e03551?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c942fc493dad02801a99aa191414a535&auto=format&fit=crop&w=600&q=60" alt="" height="200" width="150">
        </div>
      </div>
      
      <div class="col-4 mb-2">
        <div class="img-prev">
          <img src="https://images.unsplash.com/photo-1538379585867-44bf200a3d25?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=29782178fb2019f60bee12c2fcfacff4&auto=format&fit=crop&w=600&q=60" alt="" height="200" width="150">
        </div>
      </div>
      
      <div class="col-4 mb-2">
        <div class="img-prev">
          <img src="https://images.unsplash.com/photo-1538367735494-5e6cc0ff555a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3066861f0cf81849de20853676dee717&auto=format&fit=crop&w=600&q=60" alt="" height="200" width="150">
        </div>
      </div>
    </div>
  </div>

Пример 3 с jq:

var imgs = $('.img-prev>img');
imgs.each(function(){
  var item = $(this).closest('.img-prev');
  item.css({
    'background-image': 'url(' + $(this).attr('src') + ')', 
    'background-position': 'center center',            
    '-webkit-background-size': 'cover',
    'background-size': 'cover', 
  });
  $(this).hide();
});

.img-prev {
  height: 200px;
}

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  
  <div class="container">
    <div class="row img-list">
      <div class="col-4 mb-2">
        <div class="img-prev">
          <img src="https://images.unsplash.com/photo-1538356913997-b04286765811?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=39e83600a508d87be2ea636e02f30f95&auto=format&fit=crop&w=600&q=60" alt="">
        </div>
      </div>
      
      <div class="col-4 mb-2">
        <div class="img-prev">
          <img src="https://images.unsplash.com/photo-1538333785596-1cc0b5e03551?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c942fc493dad02801a99aa191414a535&auto=format&fit=crop&w=600&q=60" alt="">
        </div>
      </div>
      
      <div class="col-4 mb-2">
        <div class="img-prev">
          <img src="https://images.unsplash.com/photo-1538379585867-44bf200a3d25?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=29782178fb2019f60bee12c2fcfacff4&auto=format&fit=crop&w=600&q=60" alt="">
        </div>
      </div>
      
      <div class="col-4 mb-2">
        <div class="img-prev">
          <img src="https://images.unsplash.com/photo-1538367735494-5e6cc0ff555a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3066861f0cf81849de20853676dee717&auto=format&fit=crop&w=600&q=60" alt="">
        </div>
      </div>
    </div>
  </div>

Answer 2

попробуйте это,

<div class="container">           
  <img src="loginBackground.jpg" class="img-fluid" alt="Cinque Terre" width="200" height="200"> 
</div>