修復了 css 中的 div 響應

Question

我正在使用與 antd 反應的側邊欄。

<Sider
  style={{
    overflow: "auto",
    height: "100vh",
    position: "fixed",
    left: 0
  }}
>
  <div className="logo" />
  <Menu theme="dark" mode="inline" defaultSelectedKeys={["4"]}>
    <Menu.Item key="1" icon={<UserOutlined />}>
      nav 1
    </Menu.Item>
    <Menu.Item key="2" icon={<VideoCameraOutlined />}>
      nav 2
    </Menu.Item>
    <Menu.Item key="3" icon={<UploadOutlined />}>
      nav 3
    </Menu.Item>
    <Menu.Item key="4" icon={<BarChartOutlined />}>
      nav 4
    </Menu.Item>
    <Menu.Item key="5" icon={<CloudOutlined />}>
      nav 5
    </Menu.Item>
    <Menu.Item key="6" icon={<AppstoreOutlined />}>
      nav 6
    </Menu.Item>
  </Menu>
  <div class="avatar">
    <img
      style={{
        width: "60px",
        height: "60px",
        lineHeight: "60px",
        fontSize: "30px"
      }}
      src="https://cdn-icons-png.flaticon.com/512/2922/2922510.png"
      alt="profile"
    />
  </div>
</Sider>

在這里，我在菜單底部包含了一個 div 作為用戶配置文件。

  <div class="avatar">
    <img
      style={{
        width: "60px",
        height: "60px",
        lineHeight: "60px",
        fontSize: "30px"
      }}
      src="https://cdn-icons-png.flaticon.com/512/2922/2922510.png"
      alt="profile"
    />
  </div>

在正常視圖中它工作正常，但是當我們放大時，配置文件圖像會覆蓋在其他菜單項上。

嘗試在vh中包含高度值，在vw中包含寬度值，但這無濟於事。

那么如何在放大和縮小頁面時使此個人資料圖像具有響應性？

嘗試了以下所有給定的解決方案，但我無法達到預期的結果。 請幫助我，因為我被困在這里太久了。 提前非常感謝。

工作示例：

Answer 1

 .avatar { width: 100px; text-align: center; padding-bottom: 0px; }.ant-layout-sider-children { display: flex; flex - direction: column; }.ant-menu { flex: 1; overflow: auto; }.ant-layout-sider { top: 0; }

Answer 2

第一的。 我會避免圖像的內聯樣式。 嘗試改用 CSS。 你給 Avatar object 一個固定的 position 這意味着它會有點粘， go 超過其他元素。 在您的 CSS 上，您可以使用這樣的媒體查詢：

@media (max-width: 767.98px) { 
.avatar img{
position:relative;
width:30px;
height:30px;
}
}

它會在移動設備上改變它但這會給它一個相對的 position