要实现不同高度的多图显示，可以使用HTML和CSS来完成。

首先，需要在HTML中创建一个容器，并为每个图像创建一个单独的div元素。每个div元素将包含图像和其对应的标题。

然后，使用CSS来设置每个div元素的高度，并将它们以一定的方式进行布局，以实现不同高度的多图显示。

下面是一个示例代码，展示了如何实现不同高度的多图显示：

HTML代码：

  

    
    
Image 1
  
  

    
    
Image 2
  
  

    
    
Image 3
  

CSS代码：

.image-container {
  display: flex;
  flex-wrap: wrap;
}

.image-wrapper {
  width: 33.33%; /* 每个div元素占据一行的三分之一宽度 */
  padding: 10px;
}

.image-wrapper img {
  width: 100%;
  height: auto;
}

.image-wrapper h3 {
  text-align: center;
}

在上面的示例中，我们使用了Flexbox布局来实现图像的自适应布局。每个图像容器（image-wrapper）都被设置为占据一行的三分之一宽度，所以在一行中最多显示三个图像。

通过调整.image-wrapper的高度、图像容器的宽度以及padding值，可以实现不同高度的多图显示效果。

请注意，示例中的图像路径需要根据实际情况进行替换。另外，你还可以根据需要添加更多的图像容器来显示更多的图像。