Сосредоточьте изображения разного размера в одном размере блока
У меня есть разные изображения, инкапсулированные в блоки квадратного стиля, которые я хотел бы всегда центрировать, но у меня чертовски много времени, чтобы заставить их это сделать.
Я сделал пример того, что происходит со мной в подобном дизайне. Обратите внимание, что продукт (гриль) на самом деле не находится по центру контейнера 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>@FeaturedSpace, так что в прошлом я использовал объектную подгонку, и это потрясающе. Но я все еще мертв в воде, пытаясь центрировать изображение с подгонкой объекта или без нее.
используйте object-fit и object-position - см. jsfiddle.net/uq8mta0L
@kukkuz сделай это ответом, чтобы я мог его проверить :)
Обновлен мой ответ для сосредоточения на imgBlock
Ответы 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>если позволите, изображение должно быть в центре imgBlock
@kukkuz Почему? Вы устанавливаете imgBlock на 100x100px и imgBlock img на 100x100%, чтобы изображение всегда было того же размера, что и imgBlock.
Да, @kukkuz прав. Проблема, с которой я столкнулся, заключалась в том, что динамический ассортимент размеров изображений соответствовал заданному размеру контейнера (в данном случае imgBlock 100 на 100 пикселей).
@kukkuz @robert-ochinski Я обновил свой ответ в центре imgBlock.
@seantunwin теперь это работает :) - в вашем предыдущем ответе container был flexbox, теперь вы правильно сделали imgBlock flexbox...
Сначала установите изображение на полную ширину и высоту (или по желанию). Теперь вы можете добавить 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>Мне это нравится. У него тоже хорошая поддержка -- могу ли я использовать
Красивый. Это решение, которое я искал!
Вы можете установить позицию относительно вашего div .imgBlock.
После этого установите абсолютную позицию на вашу <img/> со всеми координатами на 0 и автоматическим полем.
Помните, что абсолютная позиция относится к ближайшему родителю с относительной позицией.
.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>Вы можете использовать старые атрибуты позиционирования, а также методы Flex. Сделайте положение основного блока относительным. Затем установите img внутри этого блока в position: 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>не кажется ли этот метод своего рода взломом по сравнению с реальным решением? Я знаю, что это работает, и я использовал это в прошлом, но если это так неправильно.
То, что мы используем сегодня, появилось благодаря хакерству и построено на таких основах и принципах. Вы можете аргументировать один метод другим, но я думаю, что все сводится к контексту и его использованию. Кроме того, я упомянул еще один метод и заявил, что это более старый способ сделать это. Можем ли мы без полного решения сказать, что такое взлом и что такое исправление, чтобы перейти к следующей версии проекта? :)
Хорошо прочитано: alligator.io/css/cropping-images-object-fit