I am making a sidebar using react with 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>

```

Here I have included a div at the bottom of menu as user profile.

```
  <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>

```

In normal view it is working fine but when we zoom in, the profile image overlays on the other menu items.

Tried including the value in `vh` for height and `vw` for width but that doesn't help.

So how to make this profile image as responsive while **zoom in** and **zoom out** of the page?

Tried all the below given solutions but I couldn't achieve the expected result. Kindly please help me as I am stuck here for too long. Big thanks in advance.

**Working Example:**

[![Edit Fixed Sider - antd@4.18.2 (forked)](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/fixed-sider-antd-4-18-2-forked-g2cyp?fontsize=14&hidenavigation=1&theme=dark)