Javascript 如何在不同的设备上呈现相同的图片？

我对手机开发还不熟悉，一些非常重要的事情让我好奇

假设我想在屏幕的100%宽度和高度上呈现一幅图片。图片应该是多大尺寸，这样我就可以在每一部手机上都显示出来，效果最佳

处理这个问题的常用策略是什么

---

谢谢

您可以获得特定屏幕的

尺寸

，并使用提供给图片的整个屏幕宽度和屏幕高度

import { Dimensions } from 'react-native';

const SCREEN_HEIGHT = Dimensions.get('window').height;
const SCREEN_WIDTH = Dimensions.get('window').width;

现在可以传递这些值

<Image uri={myUri} style={{ width: SCREEN_WIDTH, height: SCREEN_HEIGHT }}

---

我不久前需要这样做，所以我编写了一个组件。我在这里主要是比较屏幕比例和图像比例，并使用一个简单的公式相应地设置宽度和高度

const Photo = ({imageUri}) => {
    const [imageSize, setImageSize] = useState({width: 0, height: 0});

    useEffect(() => {
        Image.getSize(imageUri, (imageWidth, imageHeight) => {
            const screenWidth = Dimensions.get('window').width;
            const screenHeight = Dimensions.get('window').height;

            if (imageWidth / imageHeight < screenWidth / screenHeight) {
                setImageSize({
                    width: imageWidth + (imageWidth * (screenHeight - imageHeight)) / imageHeight,
                    height: screenHeight,
                });
            } else {
                setImageSize({
                    height: imageHeight + (imageHeight * (screenWidth - imageWidth)) / imageWidth,
                    width: screenWidth,
                });
            }
        });
    }, []);

    return (
        <View style={styles.container}>
            <Image style={imageSize} source={{uri: imageUri}} />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'black',
    },
});

export default Photo;

constphoto=（{imageUri}）=>{
const[imageSize，setImageSize]=useState（{宽度：0，高度：0}）；
useffect（（）=>{
Image.getSize（imageUri，（imageWidth，imageHeight）=>{
const screenWidth=Dimensions.get（'window'）.width；
const screenHeight=维度.get（'window'）。高度；
if（图像宽度/图像高度<屏幕宽度/屏幕高度）{
设置图像大小({
宽度：imageWidth+（imageWidth*（屏幕高度-imageHeight））/imageHeight，
高度：屏幕高度，
});
}否则{
设置图像大小({
高度：imageHeight+（imageHeight*（屏幕宽度-imageWidth））/imageWidth，
宽度：屏幕宽度，
});
}
});
}, []);
返回(
);
};
const styles=StyleSheet.create({
容器：{
弹性：1，
对齐项目：“居中”，
为内容辩护：“中心”，
背景颜色：“黑色”，
},
});
导出默认照片；

这样，无论您的图像比例或屏幕比例是多少，图像都将适合屏幕。


尽管如此，请记住，如果用户旋转屏幕，这将不会再次计算，因此如果您的应用程序启用了纵向和横向模式，您必须在屏幕方向更改时再次进行计算

它不会扭曲图像内容吗？与使用png格式的图像不同，如果您继续使用SVG格式的图像（基本上是xml代码），它的大小会很轻，图像质量很好，并且看起来不会被破坏。