Me gustaría que mi imagen de cabecera a escala con el tamaño del navegador.
Este es mi código actual para que el tca. screen grab, pero esto no la escala de la imagen en pantallas más pequeñas. He probado a utilizar la imagen de fondo de opciones, pero esto no lograr el look que deseas.

  .header-image {    
    position:absolute;
    top:0;
    bottom:0;   
    max-height:1000px;
    overflow:hidden;    
      left: 0; 
      right: 0;
    z-index:-1;         
      border:10px solid #545351;        
}

.header {
    width: 100%;
    padding-top:50px;
    margin-top:-10px;       
}

& HTML

<div align="center"><!-- big image -->
        <div class="header-image"><img src="images/liveryHeader3.jpg"></div><!-- end of big image-->
</div><!-- end of center image class--> 

CSS/HTML5 Responsive Imagen de Cabecera

CSS/HTML5 Responsive Imagen de Cabecera

La segunda imagen es más o menos lo que se muestra en el monitor más pequeño, la imagen no ha escalado & layout impar – Id como a escala de la cabeza de caballo, de modo que la imagen completa todavía muestra. Parece que funciona sobre Android & tablet, no sólo de los pequeños monitores?

  • Lo siento, estoy teniendo un tiempo difícil la interpretación de su pregunta. Estás preguntando cómo hacer para que el fondo de escala de la imagen de forma vertical, como bien?
  • Por favor proporcione una jsBin ejemplo.
  • Lo siento, no soy muy bueno en la publicación de las preguntas aquí – No, Id a la imagen para que aparezca como está (con rebosadero oculto), pero a escala con el navegador – el cliente dispone de un monitor más pequeño & resolución de pantalla que tengo que hacer & la gran imagen no a escala para mostrar su su totalidad?
  • Nunca he usado jsBin – lo siento.
InformationsquelleAutor scotia | 2013-10-18

6 Comentarios

  1. 1

    Su imagen no a escala hacia abajo con width:100%; sólo la escala así que sea cual sea el tamaño de la imagen se quedará. Usted necesidad de utilizar una «consulta de medios de comunicación» y, a continuación, establecer otro % no.

    Algo como:

    /* Smartphones (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) {
    /* put your specific styling here either replacing the background image with something smaller using % or sized down via % */
    }
    • Im seguro de esto? «sustitución de la imagen de fondo con algo más pequeño usando % o del tamaño de la vía % «
    • Significado volver a guardar la imagen en decir, 50% más pequeño en anchura y llamar a que en el css de la declaración para que el 100% de la anchura será menor que el 100% de su actual archivo, o simplemente mantener la misma imagen que tenemos, pero especificar el % a «lugar» en. La idea es cargar un archivo más pequeño. Si elige la otra opción, un pequeño dispositivo que se descarga el archivo más grande en la escala de abajo, pero es posible que no se ven tan bien como en realidad sólo el ahorro de bajar un archivo más pequeño.
    • Trataremos de que Kelly ty.
  2. 1

    de entrada el id del div como este (usar sólo uno de los div)

    HTML:

    <div id="header"> </div>

    CSS:

    #header{
      background-image:url(../images/liveryHeader3.jpg);
      background-size: 100% 100%;
    }

    OBS: en background-size, el primer valor es la anchura y la segunda está a la altura

    para obtener más información : http://www.w3schools.com/default.asp

  3. 0

    código proporcionado no escala de la imagen como se ve en la captura de pantalla, por lo que primero debe buscar en el lugar donde está realmente estirado

    de todos modos, revisa max-height:1000px; en css – esto puede limitar, y, por supuesto, usted debe agregar width:100%;height:100%; a su imagen y exterior div así

    • No sabes lo que significa? código proporcionado no escala de la imagen como se ve en la captura de pantalla de la Imagen es de 2600 * 1405
    • Sólo quiero decir que este código no se escala la imagen, debe haber algo más, tal vez adicional css o js
  4. 0

    Espero que entiendan bien lo que usted realmente desea.

    Tendrá que establecer el ancho máximo del 100% en su imagen y en ella los padres.

    Para tu css para aquellos elemento tendría este aspecto:

    .header-image {
        position:absolute;
        top:0;
        bottom:0;   
        max-height:1000px;
        max-width:100%;
        overflow:hidden;    
        left: 0;
        right: 0;
        z-index:-1; /*places header image behind text */
        border:10px solid #545351;
    }
    
    .header-image img {
        max-width:100%; 
    }
    • Entiendo tu respuesta. Mi razón para max-height ser 1000px (o aprox. 80%) fue para permitir que «más de la imagen» para pantallas más grandes como la mía. Yo podría haber simplemente acortar la imagen para que la escala tradicional. (en lugar de utilizar menos de 100% max-height oculta de desbordamiento) & para la propiedad border para permanecer 10px en lugar de un borde de la imagen.
  5. 0

    Si pones la imagen real en la css como un elemento de fondo y, a continuación, establece el color de fondo de tamaño para contener debería hacer que se ajuste exactamente al tamaño de la pantalla.

    algo como esto:

    .header-image {    
        position:absolute;
        top:0;
        bottom:0;   
        max-height:1000px;
        overflow:hidden;    
        left: 0; 
        right: 0;
        z-index:-1;         
        border:10px solid #545351;  
        background: url(*IMAGE URL HERE*) no-repeat;
        background-size: cover;
    }

    A ver cómo va.

    • Trataremos de que Rhys ty.
    • No hay alegría con que?
    • Todavía no hay alegría para mí Rhys, es tal vez mi pantalla/resolución de tamaño de lo que es «invisible» para mí? (Pantalla de 24″ ejecución de 2560*1440)- había probado el :cubierta; variante antes no hubo suerte.

Dejar respuesta

Please enter your comment!
Please enter your name here