Skip to main content
3 de 4
se añadieron 28 caracteres en el cuerpo
user avatar
user avatar

Edicion

Para tu caso en específico puedes utilizar flex, no necesitas que tu imagen del banner ocupe tanto espacio, puedes hacerla mas pequeña y tener tu foto y el banner en la misma linea, y al div (en este caso tu aside) asigarle el color de tu banner.

Puedes asginarle los anchos que desees a tus imágenes para lograr que quede como tu gustes

body {
  margin: 0;
  padding: 0;
}

.arriba {
  display: flex;
  background-color: rgb(0, 163, 232);
  align-items: center;
  justify-content: center;
}

.foto {
  max-width: 1.5rem;
  height: auto;
  margin-right: 0.5rem;
}

.banner {
  max-width: 7.5rem;
  height: auto;
}
<aside class="arriba">
  <h3></h3>
  <p>
    <img class="foto" src="https://alexandrawp.herokuapp.com/imagenes/ale2.jpg" alt="Foto">
    <img class="banner" src="https://i.sstatic.net/bWuPe.png" alt="Banner">
  </p>
</aside>


Para que tu imagen se adapte al ancho de la pantalla puedes asignarle el width: 100% o max-width: 100%, lo que hace el primero es decirle que la imagen sea de todo el ancho de su contenedor, que no serviría mucho si la imagen es mas pequeña que este ya que puede perder su definición, el segundo nos dice que su ancho máximo puede ser del tamaño de su contenedor, lo que la hará responsiva y no perderá su definición.

Para centrar una imagen podemos asignarle display: block y margin: 0 auto, esto la centrará en su contenedor.

En el siguiente ejemplo le asigno la clase responsive-image a la imagen y agrego las propiedades que mencioné

.responsive-image {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
<img class="responsive-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Cotopaxi_volcano_2008-06-27T1322.jpg/320px-Cotopaxi_volcano_2008-06-27T1322.jpg" alt="Cotopaxi">


Para centrar tu banner podemos usar la magia del flexbox, declarando un contenedor y asignandole un alto, y con align-items: center; justify-content: center;, de esta forma

body {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100vh;
  background-color: #7cec7d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  color: #fff;
  padding: 1rem;
  text-align: center;
  background-color: #7ec1f2;
}
<div class="container">
  <div class="content">
    Estoy centrado
  </div>
</div>

user22721