Imagen de fondo del 100% de ancho con una altura 'automática'

Question

Actualmente estoy trabajando en una página de aterrizaje móvil para una empresa. Es un diseño realmente básico, pero debajo del encabezado hay una imagen de un producto que siempre tendrá un ancho del 100% (el diseño muestra que siempre va de orilla a orilla). Dependiendo del ancho de la pantalla, la altura de la imagen obviamente se ajustará en consecuencia. Originalmente hice esto con un img (con un ancho de CSS del 100%) y funcionó muy bien, pero me di cuenta de que me gustaría utilizar las consultas de medios para servir diferentes imágenes basadas en diferentes resoluciones, digamos una pequeña, mediana y una versión grande de la misma imagen, por ejemplo. Sé que no puedes cambiar el img src con CSS, así que pensé que debería usar un fondo CSS para la imagen en lugar de una etiqueta img en el HTML.

Parece que no puedo hacer que esto funcione correctamente, ya que el div con la imagen de fondo necesita un ancho y una altura para mostrar el fondo. Obviamente puedo usar 'ancho: 100%', pero ¿qué uso para la altura? Puedo poner una altura fija aleatoria como 150px y luego puedo ver los 150px superiores de la imagen, pero esta no es la solución ya que no hay una altura fija. Tuve una jugada y descubrí que una vez que hay una altura (probado con 150px) puedo usar 'background-size: 100%' para que se ajuste correctamente a la imagen en el div. Puedo usar el CSS3 más reciente para este proyecto, ya que está destinado exclusivamente a dispositivos móviles.

He agregado un ejemplo aproximado a continuación. Disculpe los estilos en línea, pero quería dar un ejemplo básico para tratar de aclarar mi pregunta.

<div id="image-container"> 
    <div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div> 
</div> 

hacer yo tal vez tienen que dar el div contenedor una altura porcentaje basado en toda la página o estoy mirando esta completamente equivocado?

Además, ¿cree que los fondos CSS son la mejor manera de hacerlo? Tal vez haya una técnica que sirva diferentes etiquetas img basadas en el ancho del dispositivo/pantalla. La idea general es que la plantilla de la página de destino se utilizará en numerosas ocasiones con diferentes imágenes de productos, así que debo asegurarme de desarrollar esto de la mejor manera posible.

Me disculpo es que esto es un poco largo, pero estoy yendo y viniendo de este proyecto al siguiente, así que me gustaría hacer esta pequeña cosa. Gracias de antemano por su tiempo, es muy apreciado. Saludos

Answer 1

En lugar de utilizar background-image puede utilizar directamente img y para obtener la imagen de difundir toda la anchura de la ventana gráfica intente utilizar max-width:100%; y recordar por favor no aplicar ningún relleno o margen a su div principal del contenedor, ya que aumentará el ancho total del contenedor. Usando esta regla, puede tener un ancho de imagen igual al ancho del navegador y la altura también cambiará de acuerdo con la relación de aspecto. Gracias.

Editar: Cambiar la imagen en diferentes tamaños de la ventana

$(window).resize(function(){ 
 
    var windowWidth = $(window).width(); 
 
    var imgSrc = $('#image'); 
 
    if(windowWidth <= 400){ \t \t \t 
 
    imgSrc.attr('src','http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a'); 
 
    } 
 
    else if(windowWidth > 400){ 
 
    imgSrc.attr('src','http://i.stack.imgur.com/oURrw.png'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="image-container"> 
 
    <img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt=""/> 
 
</div>

De esta manera cambia su imagen en diferentes tamaños del navegador.

Answer 2

Puede utilizar la propiedad CSS background-size y ponerlo a cover o contain, dependiendo de su preferencia. La cubierta cubrirá la ventana por completo, mientras que contener hará que un lado se ajuste a la ventana y no cubra toda la página (a menos que la relación de aspecto de la pantalla sea igual a la imagen).

Tenga en cuenta que esta es una propiedad CSS3. En los navegadores más antiguos, esta propiedad se ignora. Alternativamente, puede usar javascript para cambiar la configuración de CSS dependiendo del tamaño de la ventana, pero esto no es preferido.

body { 
    background-image: url(image.jpg); /* image */ 
    background-position: center;  /* center the image */ 
    background-size: cover;   /* cover the entire window */ 
} 

Answer 3

Tim S. fue mucho más cerca de una respuesta "correcta", entonces la actualmente aceptada uno. Si usted quiere tener un ancho de 100%, imagen de fondo de altura variable hace con CSS, en lugar de utilizar cover (lo que permitirá la imagen se extienda fuera de los lados) o contain (que no permite que la imagen se extienda fuera en absoluto) , simplemente configure el CSS de la siguiente manera:

body { 
    background-image: url(img.jpg); 
    background-position: center top; 
    background-size: 100% auto; 
} 

Esto configurará su imagen de fondo al ancho del 100% y permitirá que la altura se desborde. Ahora puede usar las consultas de medios para cambiar esa imagen en lugar de confiar en JavaScript.

EDIT: Me acabo de dar cuenta (3 meses después) de que es probable que no desea que la imagen se desborde; parece que quiere que el elemento contenedor para cambiar el tamaño de la basó Imagen de fondo (para preservar su relación de aspecto), la cual no es posible con CSS por lo que yo sé sobre.

Esperemos que pronto pueda utilizar el nuevo atributo srcset en el elemento img. Si desea utilizar elementos img ahora, la respuesta actualmente aceptada es probablemente la mejor.

Sin embargo, puede crear un elemento de imagen de fondo sensible, con una relación de aspecto constante utilizando puramente CSS. Para ello, se establece la height a 0 y se establece el padding-bottom a un porcentaje del propio ancho del elemento, así:

.foo { 
    height: 0; 
    padding: 0; /* remove any pre-existing padding, just in case */ 
    padding-bottom: 75%; /* for a 4:3 aspect ratio */ 
    background-image: url(foo.png); 
    background-position: center center; 
    background-size: 100%; 
    background-repeat: no-repeat; 
} 

Con el fin de utilizar diferentes relaciones de aspecto, dividir la altura de la imagen original que es propio ancho, y multiplicar por 100 para obtener el valor porcentual. Esto funciona porque el porcentaje de relleno siempre se calcula en función del ancho, incluso si se trata de un relleno vertical.

Answer 4

probar esto

html { 
    background: url(image.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
     -o-background-size: cover; 
      background-size: cover; 
} 

Answer 5

sólo tiene que utilizar una imagen de fondo en dos colores:

<div style="width:100%; background:url('images/bkgmid.png'); 
     background-size: cover;"> 
content 
</div> 

Answer 6

añadir CSS:

html,body{ 
     height:100%; 
     } 
    .bg-img { 
     background: url(image.jpg) no-repeat center top; 
     background-size: cover; 
     height:100%;  
    } 

y HTML es:

<div class="bg-mg"></div> 

CSS: stretching background image to 100% width and height of screen?

Answer 7

Es 2017, y ahora usted puede usar object-fit que tiene decent support. Funciona de la misma manera que un div de background-size sino en el propio elemento, y en cualquier elemento incluyendo imágenes.

.your-img { 
    max-width: 100%; 
    max-height: 100%; 
    object-fit: contain; 
}