CSS

Diseño adaptable

Imágenes

Las imágenes normalmente no van a tener las dimensiones exactas para que encajen en el diseño, el cual además puede tener dimensiones variables si es adaptable. Para asegurar que las imágenes grandes no desbordan o creen barras de scroll, se añade la siguiente regla CSS para todos los img:

<body>
  <figure>
    <img alt="Imagen grande" src="https://upload.wikimedia.org/wikipedia/commons/c/cf/1_6E9A4589.jpg">
    <figcaption>Imagen más grande que el contenedor</figcaption>
  </figure>
</body>
img {
  max-width: 100%;
  display: block;
}
figure {
  border: 10px solid green;
  width: 250px;
  text-align: center;
  font-family: sans-serif;
}