React Resize Image Width px 基于 Bootstrap 列答案

【问题标题】：React Resize Image Width px Based on Bootstrap ColumnReact Resize Image Width px 基于 Bootstrap 列
【发布时间】：2021-10-11 19:04:43
【问题描述】：

我正在使用react-image-mapper 库，ImageMapper 组件接受一个名为width 的道具，它是以像素为单位的图像宽度。我为我的应用程序使用了react-bootstrap 布局，将其分为三列。第三列有ImageMapper：

  return (
    <>
      <Row>
        <Col md={5} />
        <Col md={2} />
        <Col md={5}> 
          <div
            style={{
              display: "flex",
              justifyContent: "center",
            }}
          >
            <ImageMapper
              id="football-field"
              src={footballField}
              alt="football-field"
              width={resizeWidth()}
              map={MAP}
            />
          </div>
      </Row>
    </>);

我需要写resizeWidth 以便它返回列的宽度（以像素为单位）。有没有办法做到这一点，或者更好的解决方案？

【问题讨论】：

标签： javascript css reactjs responsive-design react-bootstrap

【解决方案1】：

我找到了一个很好的库来访问列的宽度：react-use-measure

【讨论】：