代码之家 › 专栏 › 技术社区 › Arkon

自动调整N个图像的大小以适应容器

react-native reactjs css

Arkon · 技术社区 · 7 年前

我有以下设计:

<View style={{flexDirection: "column", justifyContent: "space-around", alignItems: "center", flex: 1}}>
  <TopElement style={{position: "absolute", top:5}}/>
  <Image key={1}/>
  <Image key={2}/>
  ...
  <Image key={n}/>
  <BottomElement style={{position: "absolute", bottom:5}}/>
</View>

我的 n 图像太大,无法容纳包装容器(例如我的屏幕)。是否可以在不接触的情况下调整尺寸(保持纵横比) TopElement 和 BottomElement

我不确定是否有内置功能,是否使用布局FlexBox道具是解决方案,或者可能根据屏幕高度手动计算每个图像的尺寸,或者可能添加另一个视图来包装它们。。。?

1 回复 | 直到 7 年前

Val 7 年前

您可以按以下方式操作:

<View style={{flexDirection: "column", justifyContent: "space-around",
      alignItems: "center", flex: 1, paddingTop: 30, paddingBottom: 30}}>
  <TopElement style={{position: "absolute", top:5}}/>
  <Image resizeMode="contain" style={{flex: 1}} key={1}/>
  ...
  <Image resizeMode="contain" style={{flex: 1}} key={n}/>
  <BottomElement style={{position: "absolute", bottom:5}}/>
</View>

使用 paddingTop & paddingBottom 在父项上 <View /> ,高度为 <TopElement /> 和 <BottomElement /> . 使顶部/底部不会与图像重叠。
设置 <Image /> 道具 resizeMode 到 'contain' . 使图像在保持原始纵横比的情况下自动调整大小。

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前