Make fixed div responsive in css-CodePudding

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

Working Example:

CodePudding user response：

.avatar {
  width: 100px;
  text-align: center;
  padding-bottom: 16px;
}

.ant-layout-sider-children {
  display: flex;
  flex-direction: column;
}

.ant-menu {
  flex: 1;
  overflow: auto;
}

You have to try this css.

CodePudding user response：

First. I would avoid inline style for the image. Try to use CSS instead. You gave the Avatar object a fixed position which means it's going to be kind of sticky and go over other elements. On your CSS you can use media queries like that:

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

It's going to change it on mobile devices But this will give it a relative position off course

CodePudding user response：

The problem with position: fixed is that it takes the element out of the document ‘flow’ so it won't respect the padding applied to its parent. Try using max-height and media queries

@media (max-device-width: 480px) and (orientation: landscape) 
{
.img{
  max-height: 200px; /* Lower the max-height for smaller devices */
}  }



@media (min-width: 768px) {
.img {
overflow-y: visible; /* Reset overflow in large displays */
   }
 }