如何在反应引导中使徽标响应答案

【问题标题】：How to make logo responsive in react bootstrap如何在反应引导中使徽标响应
【发布时间】：2021-05-23 17:32:03
【问题描述】：

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

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

我希望移动屏幕上的宽度为 190。

【问题讨论】：

您可以使用 CSS 媒体查询来更改特定屏幕尺寸下的图像宽度
不起作用。你有例子吗？

标签： css reactjs react-bootstrap

【解决方案1】：

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

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

&lt;img id="logo" src="https://i.imgur.com/kXciY0r.jpeg" width="270px"/&gt;

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

【讨论】：