使所有图像在引导程序中以相同的高度显示

我试图让4个图像的所有行都具有相同的高度尺寸,我已经试过玩的宽度和高度使用CSS,但似乎没有任何工作,肖像图片最后总是比风景的人高,这里的代码:

    

        

            

                
                
One Random Item
                
50 €
            
            

                
                
Another Random Item
                
50 €
            
            

                
                
Another another Random Item
                
50 €
            
            

                
                
Any other Random Item Any other Random Item 
                
50 €
            
        

这是发生的事情:

这就是我想要的(所有都有相同的高度)

您可以取消HTML中的宽度/高度属性,并使用CSS执行此操作.只需明确设置高度,宽度为auto.例如:

.img-responsive {
    width: auto;
    height: 100px;
}

您需要小心,水平留出足够的空间,因为一旦缩放,您将不知道任何这些图像的确切宽度.

这是一种响应方式.

.img-wrapper {
  position: relative;
  padding-bottom: 100%;
  overflow: hidden;
  width: 100%;
}
.img-wrapper img {
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}



    

        

            

                
                     
                
                
One Random Item
                
50 €
            
            

                
                     
                
                
Another Random Item
                
50 €
            
            

                
                     
                
                
Another another Random Item
                
50 €
            
            

                
                     
                
                
Any other Random Item Any other Random Item 
                
50 €
            
        

您将需要使用img-wrapper的填充底部来使图像显示高度,如果您希望图像显示不是100%的col但是希望它们阻止,则可以移除宽度100%从包装器中添加显示块和您想要的自定义宽度,但这应该可行.