4

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>

2 respuestas 2

1

Cuando a un elemento le añadimos la propiedad display con valor flex, le estamos dando la poderosa fuerza de posicionar elementos de cientos de combinaciones posibles. De ahí viene el poder e importancia que está teniendo flexbox.

Cuando creas un elemento flexible, es decir, display: flex, todo su contenido se volverá flexible.

Ejemplos básicos pueden ser, alineación horizontal:

.foo {
  background-color: #ff453a;
  display: flex;
  justify-content: center
}

.bar {
  background-color: #28cd41;
  height: 5em;
  width: 50%
}
<div class="foo">
  <div class="bar"></div>
</div>

Alineación vertical y horizontal

.foo {
  align-items: center;
  background-color: #ff453a;
  display: flex;
  height: 10em;
  justify-content: center
}

.bar {
  background-color: #28cd41;
  height: 50%;
  width: 50%
}
<div class="foo">
  <div class="bar"></div>
</div>

De ahí su magia. El problema que supongo que tienes es la inmensa cantidad de elementos para contener una imagen. El camino más corto suele ser el más sencillo.

aside {
  background-color: #ff453a;
  display: flex;
  justify-content: center;
  width: 25%
}

.logo {
  background-color: #ff9f0a;
  height: 5em;
  width: 50%
}
<aside>
  <div class="logo"></div>
</aside>

Tiene un height de ejemplo, pero puedes ver que con pocas líneas tienes más que de sobra, ya que necesitar de un elemento div llamado imagen, para albergar dentro otra imagen, es una redundancia.

Igualmente te aconsejo revisar el enlace que dejo al final de la respuesta, ya que tiene datos exactos del funcionamiento de flexbox.

He utilizado un elemento div en vez de img porque he considerado la imagen como diseño del sitio de Internet, puesto que es la manera más semánticamente correcta de hacerlo, pero puedes utilizar img perfectamente añadiendo la propiedad display: block a img.

A Complete Guide to Flexbox

0

La imagen está bien, el tamaño es el correcto, el problema es el padding de 5px que es lo que te está sobrando, para arreglar el problema basta con agregar box-sizing: border-box a la imagen.

Acá hay una explicación detallada de la propiedad: https://developer.mozilla.org/es/docs/Web/CSS/box-sizing

yo siempre al principio de mi css declaro:

*{
   box-sizing: border-box
 }

para que se aplique a todos los elementos

/* ----- ----- 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;
box-sizing:border-box;
}

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.