**Edicion**

Para tu caso en específico puedes utilizar [flex][1], 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
 

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->

    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;
    }

<!-- language: lang-html -->

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

<!-- end snippet -->

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

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->

    .responsive-image {
      display: block;
      margin: 0 auto;
      max-width: 100%;
    }

<!-- language: lang-html -->

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

<!-- end snippet -->

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

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->

    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;
    }

<!-- language: lang-html -->

    <div class="container">
      <div class="content">
        Estoy centrado
      </div>
    </div>

<!-- end snippet -->

   [1]: https://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS