如何在购物车的缩略图中垂直放置图像

我试过HTML

<a class="productselect-image" href="/Details/131631?lang=et"> 
    <img src="/Image/Product?product=131631&amp;size=228"> 
</a>

CSS：

.productselect-image { 
    height: 260px; 
    position: relative; 
    display: block; 
    overflow: hidden; 
    vertical-align: middle; 
} 

.productselect-image img { 
    vertical-align: middle; 
}

但图像会出现在底部。如何通过阅读箭头指向垂直中心 w：

短图像出现在底部，购物车看起来很丑。如何使它更好？

使用Bootstrap 3和ASP.NET MVC4。

来源

2017-09-23 Andrus

.productselect-image{ 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

如何使用display:flex？

这是我的输出

来源

2017-09-23 15:58:05 zynkn

谢谢。它适用于使用'height：260px'的情况。不添加高度图像具有可变的高度。如何避免硬编码的高度，以便所有图像具有相同的高度？图片总是返回到适合228px高度和宽度的平方。对于非方形图像，窄边将小于228px，并且只能修复它使用硬编码高度的方式。可以避免硬编码高度？ – Andrus

@Andrus检查我的答案，为您的图像的另一个修复。 –

谢谢。硬编码高度是否可以从您的答案中删除？ css能自动创建最高缩略图高度的所有缩略图吗？ – Andrus

如果你知道你的身高，你可以使用line-height是一样height，与其他display: flex;去。还采用了max-width和max-height，让您的图片在里面productselect-image

.productselect-image { 
    height: 260px; 
    line-height: 260px; 
    position: relative; 
    display: block; 
    overflow: hidden; 
} 

.productselect-image img { 
    max-width: 100%; 
    max-height: 100%; 
}

来源

2017-09-23 16:01:53

-2

尝试使用引导的代码是这样的

<div class="thumbnail" style="width: XXpx; height: YYpx"> 
<div class="thumbnail_wrapper"> 
    <img src="#"/> 
</div> 
</div>

来源

2017-09-23 16:01:57

由于图像父相，你可以再补充已经定位这对图像的css

.productselect-image img { 
    position: absolute; 
    top: 50%; 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
    transform: translateY(-50%); 
    max-width: 100%; 
}

这是最标准的方法居中事物verti凯莉。

来源

2017-09-23 16:11:50 ZeWebDev

如何在购物车的缩略图中垂直放置图像

回答

相关问题