网格项高度与响应式方形子项不匹配

Posted 2023-02-22

【中文标题】网格项高度与响应式方形子项不匹配

【英文标题】：Grid item height not matching responsive square child

【发布时间】：2019-12-25 10:28:04

【问题描述】：

我正在使用 React 和 Material-ui 创建一个 Web 应用程序。我需要一个用于地图组件的响应式方形 div，但是，使用 a trick from iamsteve.me 会破坏网格布局，因为父 Grid div 没有展开。

我尝试将方形的类移动到网格元素，但这没有帮助。

map: 
    height: '100%', width: '100%', position: 'absolute'
,
mapContainer: 
    height: '0',
    paddingBottom: '100%',
    position: 'relative'
,

<Grid item>
  <div className=classes.mapContainer>
    <Paper className=classes.map>
    // map
    </Paper>
  </div>
</Grid>

Grid 项的高度与正方形的大小不匹配。这是后续项目的问题。

【参考方案1】：

对于responsive 正方形，您应该使用Material-UI 提供的Grid。

您的代码中使用Grid 的简单更改可能是这样的

<Grid container justify="center">
   <Grid item xs=6>
      <Paper className=classes.paper>Your Map Here</Paper>
    </Grid>
</Grid>

要限制包含元素的宽度，您可以这样做

root: 
    flexGrow: 1,
    height: "50vh",
    width: "50vh"
  ,

我已经更新了一个 Codesandbox 在https://codesandbox.io/s/material-demo-pjssu 展示它

我希望这会有所帮助。谢谢

【讨论】：

不幸的是，这不会强制 Grid 项目的内容为正方形，而这正是我在这里所需要的。

我更新了代码框和链接。一旦你适合你的地图，你应该在约束中看到它，试一试。如果没有，请分叉此沙箱，添加地图并共享它

我无法将它添加到沙箱，因为地图元素是 Google-Map-React，这会引入跨源问题。但是，我已经用 div 模拟了地图。 div 的大小不是正方形的（你看不到它）。 codesandbox.io/s/material-demo-59t49?fontsize=14

我又试了一次，但 CORS 问题在codesandbox.io/s/material-demo-fgnse 遇到了我。您是否有一个apiKey 可以私下分享并在问题解决后删除？

您不需要使用谷歌地图，因为它的作用与高度 100% 和宽度 100% 的 div 相同。感谢您的帮助。