如何让水平滚动视图中的图片底部对齐且不拉伸、不改变高度？

需求：让水平滚动视图中的第二张图片底部对齐且不拉伸，同时保持图片原有尺寸、高度不同的状态，尝试过flex: 1、column布局和justifyContent但未生效。

当前使用的样式代码：

container: {
    flex: 1,
    height: 0.225 * screenHeight, //190
    width: 0.461 * screenWidth, //180
    marginRight: 0,
    marginBottom:100,
    
},
imageContainer: {

},
image: {
    height: '100%',
    width:'92%',
    resizeMode: 'contain',
},

调整方案： #

• 修改container样式：移除flex:1（已固定宽高，无需flex占比），添加display: flex确保为flex容器，让子元素能利用flex布局对齐
• 给imageContainer设置flex垂直布局并让内容靠底对齐
• 移除图片的height: '100%'，避免强制拉伸图片高度

调整后的完整样式代码：

container: {
    height: 0.225 * screenHeight, //190
    width: 0.461 * screenWidth, //180
    marginRight: 0,
    marginBottom:100,
    display: 'flex',
},
imageContainer: {
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'flex-end',
    alignItems: 'center', // 可选，让图片水平居中，按需调整
},
image: {
    width:'92%',
    resizeMode: 'contain',
},

原理说明：
container作为每个图片项的外层容器，通过display:flex让imageContainer占满容器高度；imageContainer用justifyContent: 'flex-end'将图片推至底部；图片保留contain模式保证原有比例不拉伸，同时去掉强制高度设置，自然保留不同图片的高度差异。

内容的提问来源于stack exchange，提问作者Valkyrie