React Resize Image Width px 基于 Bootstrap 列

Posted 2023-03-06

【中文标题】React Resize Image Width px 基于 Bootstrap 列

【英文标题】：React Resize Image Width px Based on Bootstrap Column

【发布时间】：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
              
              width=resizeWidth()
              map=MAP
            />
          </div>
      </Row>
    </>);

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

【参考方案1】：

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