要在不同宽比下实现上下对齐，可以使用CSS的flexbox布局。
首先，将包含要对齐元素的父元素设置为display:flex。然后，通过设置align-items属性来控制元素在交叉轴上的对齐方式。
例如，以下代码将在不同宽比下使两个元素垂直居中对齐：
<divclass="container">
<divclass="item">Item1</div>
<divclass="item">Item2</div>
</div>
.container{
display:flex;
align-items:center;/*将元素垂直居中对齐*/
}
如果要使元素底部对齐而不是垂直居中，则可以将align-items设置为flex-end：
.container{
display:flex;
align-items:flex-end;/*将元素底部对齐*/
}
需要注意的是，这种方法只能在元素具有固定高度时才能正常工作。如果元素高度不固定，则可以使用CSS的网格布局或JavaScript来实现对齐。
如果要使用CSS的网格布局实现元素的对齐，可以使用align-content属性。该属性定义了网格容器内的行在交叉轴上的对齐方式。
例如，以下代码将在不同宽比下使两个元素垂直居中对齐：
<divclass="container">
<divclass="item">Item1</div>
<divclass="item">Item2</div>
</div>
.container{
display:grid;
align-content:center;/*将行垂直居中对齐*/
}
如果要使元素底部对齐而不是垂直居中，则可以将align-content设置为end：
.container{
display:grid;
align-content:end;/*将行底部对齐*/
}
最后，如果元素的高度不确定，并且使用CSS的flexbox或grid布局仍然无法满足对齐需求，则可以使用JavaScript来计算元素的高度，并根据其高度来设置元素的垂直位置。具体实现方法可以根据具体情况而定。