style - link html

Imagen de fondo de 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>

¿Tengo que darle al contenedor div un porcentaje de altura basado en toda la página o estoy viendo esto completamente mal?

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

Agrega el 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: ¿estira la imagen de fondo al 100% de ancho y alto de la pantalla?

Answer 2

En lugar de usar background-image puede usar img directamente y para que la imagen se extienda por todo el ancho de la ventana, intente utilizar max-width:100%; y recuerde que no aplique ningún relleno o margen a su divisor principal de contenedores ya que aumentarán 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){   
    imgSrc.attr(''src'',''http://cdn.sstatic.net/Sites//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//company/img/logos/so/so-icon.png?v=c78bd457575a" alt=""/>
</div>

De esta manera, puede cambiar su imagen en diferentes tamaños de navegador.

Answer 3

Es 2017, y ahora puedes usar object-fit que tiene un soporte decente . Funciona de la misma manera que el background-size un div, pero en el elemento mismo y en cualquier elemento, incluidas las imágenes.

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

Answer 4

Puede usar la propiedad CSS background-size y configurarlo para cover o contain , según 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 5

Solo usa una imagen de fondo de dos colores:

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

Answer 6

Tim S. estaba mucho más cerca de una respuesta "correcta" que la actualmente aceptada. Si desea tener una imagen de fondo de 100% de ancho y altura variable con CSS, en lugar de usar una cover (que permitirá que la imagen se extienda desde los lados) o contain (lo que no permite que la imagen se extienda en absoluto) , simplemente configure el CSS de esta manera:

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

Esto configurará la imagen de fondo en un 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.

EDITAR: Me acabo de dar cuenta (3 meses después) de que probablemente no desee que la imagen se desborde; parece que quieres que el elemento del contenedor cambie de tamaño en función de su imagen de fondo (para preservar su relación de aspecto), lo que no es posible con CSS, hasta donde yo sé.

Con suerte, pronto podrá usar el nuevo atributo srcset en el elemento img . Si desea usar elementos img ahora, la respuesta actualmente aceptada es probablemente la mejor.

Sin embargo, puede crear un elemento receptivo de imagen de fondo con una relación de aspecto constante usando puramente CSS. Para hacer esto, establece la height en 0 y establece el padding-bottom en un porcentaje del propio ancho del elemento, de esta manera:

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

Para utilizar diferentes relaciones de aspecto, divida la altura de la imagen original por su propio ancho y multiplique 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 7

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