Центрируйте изображения разных размеров в одном и том же размере

Question

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

Я сделал пример того, что со мной происходит в подобном дизайне. Обратите внимание, что продукт (гриль) на самом деле не центрирован в контейнере imgblock.

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

.imgBlock {
  width:100px;
  height:100px;
  border:2px solid black;
  margin:1px;
  padding:4px;
}

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

<div class="container">
  <div class="imgBlock">
    <img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/WG-logo-short-black.png?43066">
  </div>
  <div class="imgBlock">
    <img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/M1-Grill-FAQ.jpg?43066">
  </div>
</div>

Answer 1

Сначала установите изображение на полную ширину и высоту (или по желанию).Теперь вы можете добавить object-fit: contain, чтобы поместить изображение в imgBlock, и теперь использовать object-position: center для его выравнивания - см. Демонстрацию ниже:

.imgBlock {
  width:100px;
  height:100px;
  border:2px solid black;
  margin:1px;
  padding:4px;
}

.imgBlock img{
  height:100%; /* set full height */
  width:100%; /* set full width */
  display:block;
  object-fit: contain; /* constrains the image maintaining aspect ratio */
  object-position: center; /* default position is center - so optional in this case */
}

<div class="container">
  <div class="imgBlock">
    <img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/WG-logo-short-black.png?43066">
  </div>
  <div class="imgBlock">
    <img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/M1-Grill-FAQ.jpg?43066">
  </div>
</div>

Answer 2

Вы можете использовать более старые атрибуты позиционирования, а также методы Flex.Сделать положение основного блока относительным.Затем установите img внутри этого блока в положение: absolute.Поместите этот элемент блока сверху: 50% слева: 50% родительского элемента.Так как это идет верхним левым углом, это будет немного от центра.Затем мы будем использовать transform: translate (-50%, -50%), чтобы вернуть его в истинный центр.

Подробнее о позиции здесь, в MDN.

.imgBlock {
  position: relative;
  width:100px;
  height:100px;
  border:2px solid black;
  margin:1px;
  padding:4px;
}

.imgBlock img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height:100%;
  max-width:100%;
  display:block;
}

<div class="container">
  <div class="imgBlock">
    <img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/WG-logo-short-black.png?43066">
  </div>
  <div class="imgBlock">
    <img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/M1-Grill-FAQ.jpg?43066">
  </div>
</div>

Answer 3

Вы можете установить положение относительно вашего div .imgBlock. После этого установите абсолютную позицию на <img/> со всеми координатами на 0 и полем auto.

Помните, что абсолютная позиция относится к ближайшему родителю с относительной позицией.

.imgBlock {
  width:100px;
  height:100px;
  border:2px solid black;
  margin:1px;
  padding:4px;
  position:relative;
}

.imgBlock img{
  max-height:100%;
  max-width:100%;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<div class="container">
  <div class="imgBlock">
    <img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/WG-logo-short-black.png?43066">
  </div>
  <div class="imgBlock">
    <img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/M1-Grill-FAQ.jpg?43066">
  </div>
</div>

Answer 4

Вы можете добавить display: flex к imgBlock, затем отцентрировать по горизонтали с помощью justify-content и по вертикали с помощью align-items.

.imgBlock {
  display: flex;
  align-items: center;
  justify-content: center;

  width:100px;
  height:100px;
  border:2px solid black;
  margin:1px;
  padding:4px;
}

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

<div class="container">
  <div class="imgBlock">
    <img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/WG-logo-short-black.png?43066">
  </div>
  <div class="imgBlock">
    <img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/M1-Grill-FAQ.jpg?43066">
  </div>
</div>