减小模态框内的图像大小答案

【问题标题】：reduce image size inside a modal减小模态框内的图像大小
【发布时间】：2021-07-23 03:16:23
【问题描述】：

我正在使用 react-popup 中的弹出组件。我在其中添加了一个图像，但图像拉伸到全宽和全长。我怎样才能减小它的大小？

export default () => (
  <Popup
    trigger={<Button className="button" variant="contained" color="primary" > Click me! </Button>}
    modal
    nested
  >
    {(close: any) => (
      <div className="modal">
        <button className="close" onClick={close}>
          &times;
        </button>
        <div className="header"> Heading</div>
        <div className="content">
          {' '}
          <div className="car">
          <img src={car} alt="car" />
          </div>
          <br />
          <br />
       Text
        </div>
      </div>
    )}
  </Popup>
);

风格：

  .car {
    width: 10;
  }

我尝试创建一个沙盒，但它给出了一个材质 UI 错误： https://codesandbox.io/s/bold-hooks-yhik1?file=/src/Popup.tsx

当你点击按钮时，模式打开

【问题讨论】：

你为什么用reactjs-popup而不是MUI的Dialog？

标签： javascript css reactjs typescript material-ui

【解决方案1】：

你需要在css中选择img标签，并输入一个有效的单位，比如px或者%

组件

<div className="modal">
    <button className="close" onClick={close}>
      &times;
    </button>
    <div className="header"> Guide </div>
    <div className="content">
      {" "}
      <img src={car} alt="charts" className="charts" />
      <br />
      This example demonstrates the
    </div>
  </div>

CSS

.charts {
  width: 20%;
}

【讨论】：