如何在 React 中使徽标响应 bootstrap

Question

我正在使用 React Bootstrp，我正在尝试根据屏幕尺寸更改徽标的宽度。实现这一目标的最佳方法是什么？这是我的代码：

<Navbar.Brand href="#home">
        <img
          src={logo}
          width={270}
          className="d-inline-block align-top"
          alt="Overland NInja Logo"
        />
</Navbar.Brand>

我希望手机屏幕上的宽度为 190。

Answer 1

这是一个使用 CSS 媒体查询调整元素大小的简单示例（最好在全屏模式下查看）

@media screen and (max-width: 900px) {
  #logo {
    width: 190px;
  }
}

<img id="logo" src="https://i.imgur.com/kXciY0r.jpeg" width="270px"/>

您可以将此用于 CSS 解决方案，以根据屏幕尺寸更改图像。

如何在 React 中使徽标响应 bootstrap

How to make logo responsive in react bootstrap

css

reactjs

react-bootstrap