如何更改 CSS 以在页面上正确定位和调整图像大小

Question

我确信这个问题之前已经被问过多次，但似乎每个场景都略有不同。我正在使用 React 在页面上定位多个元素。其中一个元素是地图，需要将其大小调整到刚好低于页面宽度，但 CSS 似乎没有正确包含它。

这是调试中可见的代码：

<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 显示高度为 0px，并且图像似乎正在扩展到编码图像的完整尺寸。第一个 div 的行为就好像里面什么都没有，但我假设这是因为绝对定位。我需要的是

<img />

标签包含在第一个 div 内，并且整个宽度都在页面内。目前第一个 div 具有正确的宽度。

我确信这将是一个非常简单的修复，但我对 CSS 的了解非常有限。

谢谢你。

编辑：这是用于生成页面的完整 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>
);

Answer 1

我认为

position: absolute

导致了你的错误