Как поместить картинки в блок

283

14 марта 2017, 14:13

Здравствуйте, ребята. Мне нужно поместить картинки товаров в блок 280x200, так, чтобы блок полностью заполнился и картинки не поменяли свои пропорции, если пропорции мешают, то обрезать, то есть не надо, чтобы картинка растягивалась, а просто обрезалась. Я пытался разными способами, но не получилось.

Answer 1

1) Устанавливай картинку фоном и задай ей размер cover:

.block { 
  width: 280px; 
  height: 200px; 
  background-image: url(https://www.gravatar.com/avatar/0e701b6571349036da776281d23d065a?s=300&d=identicon&r=PG&f=1); 
  background-size: cover; 
  background-position: center; 
  border: 2px solid #000; 
}

<div class="block"></div>

2) Вариант с позиционированием:

.block { 
  position: relative; 
  width: 280px; 
  height: 200px; 
  border: 2px solid #000; 
  overflow: hidden; 
} 
 
.block > img { 
  width: 100%; 
  height: auto; 
}

<div class="block"> 
  <img src="https://www.gravatar.com/avatar/0e701b6571349036da776281d23d065a?s=300&d=identicon&r=PG&f=1"> 
</div>

Но с этим вариантом морока, так как ты не знаешь по ширине ровнять на всю или по высоте.

Если это идею развивать, то можно с помощью PHP определять размер картинки: картинка больше по ширине или высоте. Если картинка больше по ширине, то устанавливать класс .imgh, и этот класс будет устанавливать размер картинке {width: auto; height: 100%}, а если больше высота, то ставить .imgv, который будет иметь размеры {width: 100%; height: auto}.

Пример:

.block { 
  position: relative; 
  width: 280px; 
  height: 200px; 
  border: 2px solid #000; 
  overflow: hidden; 
} 
 
.block > img { 
  width: 100%; 
  height: auto; 
} 
 
.block > img.imgh { 
  width: auto; 
  height: 100%; 
} 
.block > img.imgv { 
  width: 100%; 
  height: auto; 
}

<h3>Берём картинку, где ширина больше высоты</h3> 
 
<p>И видим, что по высоте картинка не полная:</p> 
<div class="block"> 
  <img src="https://upload.wikimedia.org/wikipedia/ru/f/f9/Generator_Company.jpg"> 
</div> 
 
<h3>Для нормального определения, нужно определять в PHP, что больше, ширина или высота</h3> 
 
<p>Если ширина больше, то устанавливаем класс с размерами {width: auto; height: 100%}</p> 
<div class="block"> 
  <img src="https://upload.wikimedia.org/wikipedia/ru/f/f9/Generator_Company.jpg" class="imgh"> 
</div>

А вообще, вам мой совет, при добавлении картинки товара, в PHP сделайте, чтобы картинка ужималась и обрезалась до нужного размера. Тогда и подстраивать ничего не нужно будет, и сайт будет меньше загружаться по времени