React PhotoSwipeGallery仅是一栏

问题描述

在使用react-photoswipehttps://www.npmjs.com/package/react-photoswipe)并尝试按示例使用photoswipegallery时...画廊最终变成一列。

let items = props.framesPaths.map((filename) => {
    return {
        src: 'https://example.com/' + props.folderName + '/' + filename,thumbnail: 'https://example.com/' + props.folderName + '/' + filename,w: 1200,h: 900,title: filename
    }
})

const getThumbnailContent = (item) => {
    return (
        <img src={item.thumbnail} width={120} height={90} />
    );
}


return <photoswipegallery items={items} thumbnailContent={getThumbnailContent} />

它位于一个看起来像这样的容器中:

     <Grid item xs={12} align="center">
            <Paper className={`${classes.mediaFrame}`} elevation={10} align='center' square>
                <Typography variant={'h6'}>All frames ({frames.length})</Typography>
                <Framesgallery framesPaths={frames} folderName={cameraFolderName(cam)} />
            </Paper>
    </Grid>

适用的类别是:

mediaFrame: {
        display: 'inline-block',maxWidth: '90%',padding: '5px',paddingLeft: '25px',paddingRight: '25px',justify: 'center'
    },media: {
        width: '100%',},

问题是输出看起来像这样:

enter image description here

在包含的纸张上添加最小宽度90%的图像,可以得到相同的视图,但缩略图位于更宽的“纸张”元素中间。

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)