如何修改CSS在React页面中正确定位并缩放地图图片

问题描述 #

我知道这类问题已经被问过很多次，但每个场景都有点不一样。我用React做页面布局，其中有个地图图片元素，想把它的尺寸设为略小于页面宽度，但CSS没法正确约束它。

调试时看到的DOM结构：

<div id="Layout_Map_Container" class="col-sm-10">
    <div class="col-sm-10" id="Layout_SiteMap_Img" style="z-index: 10;">
        <img src="data:image/jpeg;base64,/9j/4QDORXhpZgAASUkqAAgAAAAGABoBBQABAAAAVg..." alt="Layout plan for X" id="floorMap" style="width: 100%; position: absolute;">
    </div>
</div>

第二个div高度显示为0px，图片会扩展到原始尺寸。第一个div看起来像没有内容，我猜是绝对定位导致的。我需要让<img/>被第一个div包裹，整体宽度控制在页面范围内，现在第一个div的宽度是对的。我CSS知识有限，应该是个简单的修复方案。

补充完整React代码 #

生成页面的完整React代码（其他元素不影响地图布局）：

return (
    <div>
        <Row>
            {(isAdmin && !areMapsLoading) ?
                <span style={{ 'whiteSpace': 'nowrap', 'backgroundColor': '#ccc', 'visibility': `${currentMap !== -1 ? 'visible' : 'hidden'}` }}>
                    <label htmlFor='layoutEditSelect'>Edit</label>&nbsp;
                    <input id='layoutEditSelect' type='checkbox' ref={editRef}
                        onClick={async (e) => { setEditMode(e.target.checked); }}
                    />
                </span>
                : <span></span>
            }
            <Col sm={10}>
                {//(editMode && currentDesk != null) 
                    false ?
                        <div style={{ position: 'absolute', top: '100px', left: '300px' }}>

                            <Row>
                                <Col>Left</Col><Col>{Math.round(currentDesk.x)}</Col>
                                <Col>Height</Col><Col>{currentDesk.height}</Col>
                            </Row>
                            <Row>
                                <Col>Top</Col><Col>{Math.round(currentDesk.y)}</Col>
                                <Col>Width</Col><Col>{currentDesk.width}</Col>
                            </Row>
                            <Row>
                                <Col>Rotation</Col>
                                <Col>{currentDesk.rotation}&deg;</Col>
                            </Row>

                        </div>
                        : ''
                }
            </Col>
        </Row>
        <Row>
            <Col sm={1}>
                <Row>
                    <Col>
                        {!areMapsLoading ? (
                            buildMapSelector()
                        ) : (
                            <Loading title="Map Data" />
                        )}
                    </Col>
                    <Col>
                        {
                            editMode && mapScale.height ? (<AddDesks
                                maps={maps}
                                deskTypes={deskTypes}
                                desks={desks}
                                editMode={editMode}
                                scale={mapScale}
                                currentMap={currentMap}
                                fns={AddDesksFns}
                                
                            />
                            )
                                : ''
                        }
                    </Col>
                </Row>
            </Col>
            <Col sm={10} id="Layout_Map_Container" ref={mapContainer}>
                <div
                    ref={mapContainer}
                    style={{
                        width: "100%",
                        height: `${window.height}px`,
                        position: "absolute",
                        zIndex:10
                    }}
                    onClick={() => clickMap()}
                    onLoad={
                        () => {
                            //console.log("load");
                            getScale();
                            clickMap();
                        } /*If map is reset, set current desk to null*/
                    }
                    className="map"
                    id="Layout_SiteMap_Img"
                >
                    <img
                        src={mapImage}
                        style={{ width: "100%", position: "absolute" }}
                        alt={`Layout plan for ${maps.maps[currentMap]?.currentSite?.SiteName}`}
                        ref={mapRef}
                        id="floorMap"
                        onLoad={getScale}
                    />
                    <React.Fragment>{buildDesks()}</React.Fragment>
                </div>
            </Col>
        </Row>
        {showStatus(currentDesk)}
    </div>
);

解决方法 #

问题核心是绝对定位的元素会脱离文档流，父容器无法感知其尺寸，导致高度塌陷，图片也不受约束。按以下步骤修改：

• 给地图的直接父容器（Layout_SiteMap_Img）设置position: relative，同时移除它的position: absolute。这样父容器会留在文档流中，绝对定位的子元素（如果有的话）会以它为参考。
• 移除图片的position: absolute，让图片正常占据文档流空间，父容器会自动根据图片高度调整自身高度。
• 将父容器的height: ${window.height}px改为height: auto，让容器自适应内容高度；如果需要限制最大高度，可添加max-height: 100vh和overflow: auto防止超出视口。

修改后的地图容器代码片段：

<Col sm={10} id="Layout_Map_Container" ref={mapContainer}>
    <div
        ref={mapContainer}
        style={{
            width: "100%",
            height: "auto",
            position: "relative",
            zIndex: 10
        }}
        onClick={() => clickMap()}
        onLoad={() => {
            getScale();
            clickMap();
        }}
        className="map"
        id="Layout_SiteMap_Img"
    >
        <img
            src={mapImage}
            style={{ width: "100%" }}
            alt={`Layout plan for ${maps.maps[currentMap]?.currentSite?.SiteName}`}
            ref={mapRef}
            id="floorMap"
            onLoad={getScale}
        />
        <React.Fragment>{buildDesks()}</React.Fragment>
    </div>
</Col>

额外提示：如果buildDesks()生成的元素需要在图片上方定位，可给这些元素单独设置position: absolute，因为父容器已经设为relative，它们会相对于地图容器定位，不会影响容器尺寸计算。

内容的提问来源于stack exchange，提问作者Geoff