Ejemplo de ajuste de imágenes responsive

by Diego C Martin

HTML

<div id=contenedor>
  <header>
    <h1>
    Ejemplo de ajuste de imágenes responsive
    </h1>
  </header>
  <main>
    <h2>
    Subtítulo
    </h2>
    <p>
      Ejemplo de ajuste de imágenes responsive. Ejemplo de ajuste de imágenes responsive. Ejemplo de ajuste de imágenes responsive. Ejemplo de ajuste de imágenes responsive. 
    </p>
    <p>
      <img src="https://www.lanuevacronica.com/imagenes/articulos/foto-paisaje-premio-ignacio-municio-16418.jpg"> 
    </p>
    <p>
      Ejemplo de ajuste de imágenes responsive. Ejemplo de ajuste de imágenes responsive. Ejemplo de ajuste de imágenes responsive. Ejemplo de ajuste de imágenes responsive. 
    </p>
  </main>
  <footer>
    <p>
      Ejemplo de ajuste de imágenes responsive. Ejemplo de ajuste de imágenes responsive. Ejemplo de ajuste de imágenes responsive. Ejemplo de ajuste de imágenes responsive. 
    </p>
  </footer>
</div>

CSS

#contenedor{
  max-width:600px;
  margin:10px auto;
  border:1px solid #000;
}
header, footer {
  margin: 0;
  background-color:#eee;
  padding:10px;
  text-align:center;
}
main{
  padding:10px;
}
main img {
  max-width:100%;
}