Estoy haciendo un sidebar, en el div de clase sidebar-logo
quiero agregar un logo, sucede que la imagen no se centra bien en ese div y no esta aplicando el auto ajustado de la imagen. He intendado con flex blox pero debo estar usándolo mal.
La idea es solo centrar la imagen en el div de clase sidebar-logo
y que esta imagen sea responsive.
/* ----- ----- SIDEBAR ----- ----- */
.web-sidebar{
width: 20%;
color: white;
background: #0076db;
position: fixed;
bottom:0px;
top: 0px;
}
.sidebar-logo{
background-color: red;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.sidebar-logo_img p{
}
.sidebar-logo_img img{
max-width: 100%;
background: green;
padding: 5px;
}
.web-sidebar div{
height: 17.5%;
}
.sidebar-rest{
height: 10%;
}
/* ----- ----- SIDEBAR ----- ----- */
<div class="web-sidebar">
<div class="sidebar-logo">
<div class="sidebar-logo_img">
<img src="https://picsum.photos/200/300" alt="">
</div>
</div>
<div class="sidebar-select">
Epale
</div>
<div class="sidebar-select">
hey
</div>
<div class="sidebar-select">
hey
</div>
<div class="sidebar-select">
hey
</div>
<div class="sidebar-rest">
hey
</div>
</div>