以相同的块尺寸将不同尺寸的图像居中

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以将图像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设置为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> 

Answer 3

您可以将display: flex添加到imgBlock ，然后在justify-content处水平imgBlock ，在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> 

Answer 4

您可以相对于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>