Выравнивание изображения в сетке

428

08 декабря 2017, 02:22

Допустим есть сетка из двух рядов по 4 блока в ряду.

В эти блоки вставляются изображения img из админки. Изображения могут быть разные как по ширине, так и по высоте, из-за этого изображения выравниваются только по ширине, и если высота маленькая, то снизу может быть пустое место, и блоки будут смотреться не ровно.
Можно ли сделать стилями, если высота маленькая, то должно выравниваться по высоте, а если ширина маленькая, то должно выравниваться по ширине? Сейчас для изображений такой стиль:

img {
    max-width: 100%;
    height: auto;
}

Обёртка для изображений такая:

<div class="col-lg-3 col-md-6 col-sm-6 gallery__item">

Answer 1

Как вариант:

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

* { 
  box-sizing: border-box; 
} 
 
html, 
body { 
  width: 100%; 
  height: 100%; 
  padding: 0; 
  margin: 0; 
} 
 
.wrap { 
  overflow: hidden; 
} 
 
.col { 
  width: 25%; 
  float:left; 
  height: 200px; 
  padding: 2px; 
} 
 
.img-prev { 
  width: 100%; 
  height: 100%; 
  background: #ccc; 
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
   
<div class="wrap"> 
  <div class="col"> 
    <div class="img-prev"> 
      <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt=""> 
    </div> 
  </div> 
  <div class="col"> 
    <div class="img-prev"> 
      <img src="https://media.istockphoto.com/photos/plant-growing-picture-id510222832?k=6&m=510222832&s=612x612&w=0&h=Pzjkj2hf9IZiLAiXcgVE1FbCNFVmKzhdcT98dcHSdSk=" alt=""> 
    </div> 
  </div> 
  <div class="col"> 
    <div class="img-prev"> 
      <img src="https://images.unsplash.com/photo-1504681869696-d977211a5f4c?auto=format&fit=crop&w=281&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt=""> 
    </div> 
  </div> 
  <div class="col"> 
    <div class="img-prev"> 
      <img src="https://images.unsplash.com/photo-1504006833117-8886a355efbf?auto=format&fit=crop&w=750&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt=""> 
    </div> 
  </div> 
</div>

Answer 2

Пример

.gallery__pict { 
  padding-bottom: 100%; 
  overflow: hidden; 
  position: relative; 
  margin-bottom: 30px; 
} 
 
.gallery__pict>img { 
  object-fit: cover; 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: #ccc; 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="row"> 
  <div class="col-lg-3 col-md-6 col-sm-6 gallery__item"> 
    <div class="gallery__pict"><img src="http://lorempixel.com/400/200/sports" class="img-responsive" alt=""></div> 
  </div> 
  <div class="col-lg-3 col-md-6 col-sm-6 gallery__item"> 
    <div class="gallery__pict"><img src="http://lorempixel.com/600/200/sports" class="img-responsive" alt=""></div> 
  </div> 
  <div class="col-lg-3 col-md-6 col-sm-6 gallery__item"> 
    <div class="gallery__pict"><img src="http://lorempixel.com/400/400/sports" class="img-responsive" alt=""></div> 
  </div> 
  <div class="col-lg-3 col-md-6 col-sm-6 gallery__item"> 
    <div class="gallery__pict"><img src="http://lorempixel.com/1000/400/sports" class="img-responsive" alt=""></div> 
  </div> 
</div> 
 
<div class="row"> 
  <div class="col-lg-3 col-md-6 col-sm-6 gallery__item"> 
    <div class="gallery__pict"><img src="http://lorempixel.com/400/100/sports" class="img-responsive" alt=""></div> 
  </div> 
  <div class="col-lg-3 col-md-6 col-sm-6 gallery__item"> 
    <div class="gallery__pict"><img src="http://lorempixel.com/100/200/sports" class="img-responsive" alt=""></div> 
  </div> 
  <div class="col-lg-3 col-md-6 col-sm-6 gallery__item"> 
    <div class="gallery__pict"><img src="http://lorempixel.com/2000/400/sports" class="img-responsive" alt=""></div> 
  </div> 
  <div class="col-lg-3 col-md-6 col-sm-6 gallery__item"> 
    <div class="gallery__pict"><img src="http://lorempixel.com/400/1000/sports" class="img-responsive" alt=""></div> 
  </div> 
</div>