Imagen de fondo CSS para ajustarse al ancho, la altura debe escalarse automáticamente en proporción

Hay una propiedad CSS3 para esto, a saber background-size( verificación de compatibilidad ). Si bien se pueden establecer valores de longitud, generalmente se usa con los valores especiales containy cover. En tu caso específico, deberías utilizar cover:

body {
    background-image:    url(images/background.svg);
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;              /* optional, center the image */
}

Explicación de huevos para containycover

Perdón por el mal juego de palabras, pero voy a usar la imagen del día de Biswarup Ganguly como demostración. Digamos que esta es su pantalla y el área gris está fuera de su pantalla visible. Para demostración, asumiré una proporción de 16x9.

Queremos utilizar la imagen del día antes mencionada como fondo. Sin embargo, recortamos la imagen a 4x3 por alguna razón. Podríamos establecer la background-sizepropiedad en una longitud fija, pero nos centraremos en containy cover. Tenga en cuenta que también asumo que no alteramos el ancho y/o el alto de body.

contain

contain

Escale la imagen, conservando su relación de aspecto intrínseca (si corresponde), al tamaño más grande de modo que tanto su ancho como su alto puedan caber dentro del área de posicionamiento del fondo.

Esto asegura que la imagen de fondo siempre esté completamente contenida en el área de posicionamiento del fondo; sin embargo, podría haber algún espacio vacío lleno background-coloren este caso:

cover

cover

Escale la imagen, conservando su relación de aspecto intrínseca (si corresponde), al tamaño más pequeño de modo que tanto su ancho como su alto puedan cubrir completamente el área de posicionamiento del fondo.

Esto asegura que la imagen de fondo cubra todo. No habrá nada visible background-color, sin embargo, dependiendo de la proporción de la pantalla, una gran parte de la imagen podría verse cortada:

Demostración con código real.

div > div {
  background-image: url(https://i.stack.imgur.com/r5CAq.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ccc;
  border: 1px solid;
  width: 20em;
  height: 10em;
}
div.contain {
  background-size: contain;
}
div.cover {
  background-size: cover;
}
/********************************************
 Additional styles for the explanation boxes 
*********************************************/

div > div {
  margin: 0 1ex 1ex 0;
  float: left;
}
div + div {
  clear: both;
  border-top: 1px dashed silver;
  padding-top:1ex;
}
div > div::after {
  background-color: #000;
  color: #fefefe;
  margin: 1ex;
  padding: 1ex;
  opacity: 0.8;
  display: block;
  width: 10ex;
  font-size: 0.7em;
  content: attr(class);
}

<div>
  <div class="contain"></div>
  <p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
  </p>
</div>
<div>
  <div class="cover"></div>
  <p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code>&lt;div&gt;</code>.</p>
</div>

Feb 13 '2012 17:02 Zeta