Question

我有一个矩形图像，高度大于宽度。因此使用resizeMode ='cover'。它使纵横比保持相等，但从中心开始扩展，看不到图像的顶部。我想做的是保持宽高比并从顶部显示图像。

请尝试小吃中的代码：https://snack.expo.io/@codebyte99/new-addition-to-home-page

代码：

<View>
    <Image
      source={{
        uri:
          'https://img.kpopmap.com/2017/09/HanYeSul-min.jpg',
      }}
      resizeMode={'cover'}
      style={{ width: 120, height: 120 }}
    />
 </View>

立即显示图片

了解我要实现的目标

原始图片

我想从顶部开始对齐图像，以使头部清晰可见。我们可以在CSS中通过object-fit：cover和object-position：top做到这一点，但是如何在react native中完成呢？

Answer 1

您可以尝试像这样使用ImageBackground和一些overflow hidden：

import * as React from 'react';
import { Text, View, StyleSheet, ImageBackground } from 'react-native';
import Constants from 'expo-constants';


export default function App() {
  return (
    <View style={styles.container}>
      <View styles={styles.imageContainer}>
        <ImageBackground
           source={{uri: 'https://i.stack.imgur.com/n5xcc.jpg'}}
            style={{
              height: 200, // <-- you can adjust visible area
              width: 200,  // <-- same here
              overflow: 'hidden'
            }}
            imageStyle={{
              resizeMode: "cover",
              height: 260, // <-- you can adjust this height to play with zoom
            }}
        >
        </ImageBackground>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: 'pink',
    alignItems: 'center',
    padding: 8,
  },
});

结果应该是这样的：

Answer 2

您可以使用resizeMode: contain。

cover和contain之间的区别是（来自文档）：

cover：统一缩放图像（保持图像的宽高比），以使图像的两个尺寸（宽度和高度）都比视图的相应尺寸equal to or larger（减去填充）

contain：统一缩放图像（保持图像的宽高比），以使图像的两个尺寸（宽度和高度）都比视图的相应尺寸equal to or less（减去填充）

但是，使用contain会导致宽度也减小，以保持宽高比。

Answer 3

尝试一下

 style={{
  width: 120,
  height: 120,
  position: 'absolute',
  top:0,
  resizeMode: 'cover',
}}

将顶部与图像中的调整大小模式封面垂直对齐-反应本机

3 个答案: