Css 反应贴图总图：贴图未占据整个宽度

我使用语义react ui作为ui库，并使用react map gl在react应用程序中渲染地图。但是，从react map gl渲染的贴图不会占用整个列的宽度。请查看下图：

虚线表示该列。地图还有足够的宽度可以拉伸。但根据文档，我们必须以像素为单位提供地图的宽度和高度

集装箱代码如下：

    render() {
    return (
        <Grid style={{ padding: '20px' }}>
            <Grid.Row>
                <Grid.Column mobile={16} computer={12} style={{ border: 'dotted', paddingLeft: 0 }}>
                    <PincodesMap
                        viewPort={this.props.viewPort}
                        handleViewportChange={this.handleViewportChange.bind(this)}
                    />
                </Grid.Column>
                <Grid.Column mobile={16} computer={4} style={{ border: 1 }}>
                    This is test
                </Grid.Column>
            </Grid.Row>
        </Grid>
    );
}

viewPort: {
        width: 800,
        height: 800,
        latitude: 21.1458,
        longitude: 79.0882,
        zoom: 4
    }

我们不能提供百分比宽度。我们如何使它显示全宽？另外，如何在手机上自动调整地图的大小

---

谢谢

您应该能够提供宽度的百分比。只要确定它是一根线

viewPort: {
    width: "100%",
    height: "100%",
    latitude: 21.1458,
    longitude: 79.0882,
    zoom: 4
}

---

使用

react map gl

version 5.2.3，当我使用

width:'100%'，height:'100%

时，贴图不会渲染

我用“vw”/“vh”单位代替了百分比单位，比如：

宽度：“100vw”，高度：“100vh”

。这是当前显示在中的语法样式

repo示例直接使用宽度/高度道具，但在

视口中它看起来像：

viewPort: {
  width: '100vw',
  height: '100vh',
  latitude: 21.1458,
  longitude: 79.0882,
  zoom: 4
}

希望能帮助到别人。
对我来说，用
反应地图-gl@5.2.3
，我无法将宽度和高度指定为
100%
。虽然指定
100vh
有效，但在移动设备上存在问题

我通过如下指定
viewport
解决了这个问题

视口：{
纬度：0，
经度:0,，
缩放：1，
高度：window.innerHeight，
宽度：window.innerWidth，
}
这对我很有用：

viewport: {
  width: "fit",
  ...
},


this.setState（{viewport:{…nextViewport，宽度：“fit”}）
}
...
>
您能创建一个显示代码的plunkr吗？检查此项，您可以在视口中给出
宽度：'100%
。谢谢@MurliPrajapati它成功了。
viewport: {
  width: "fit",
  ...
},

<ReactMapGL
  onViewportChange={nextViewport =>
    this.setState({ viewport: { ...nextViewport, width: "fit" } })
  }
...
>