Pongo una imagen para informar de que mi sitio está en construcción. Es una imagen de 800×600 que mantener su tamaño original cuando el acceso en el escritorio. Es la única cosa en la página.

Quiero hacer que encaje en toda la pantalla cuando la gente acceder desde los teléfonos celulares. Cómo?

<style type="text/css">
    body { background-color: #6BC5C5; }
</style>
<title>Size is being moved to another server</title>
<div style="margin: 0; padding: 0; left: 0; top: 0; border: 0; position: absolute;">
<img src="movedatacenter.jpg" alt="Under Maintenance" width="595" height="1021" align="left"></div>

3 Comentarios

  1. 8

    Lo que usted desea utilizar consultas de medios de comunicación. El uso de los medios de comunicación una consulta, usted puede aplicar diferentes reglas CSS basado en el tamaño de la pantalla.

    Por ejemplo:

    @media only screen and (max-width: 600px) {
    
        img#underconstruction {width: 100%; height: 100%; margin: 0; padding; 0;}
    }

    Que forzar una img con el id de underconstruction ir a toda la anchura y la altura si la pantalla del dispositivo es 600px o más pequeños. 600 es un buen tamaño, ya que los nuevos iphones tienen una altura mayor de 480.

    Además, tendrás que forzar la vista del puerto a una proporción de 1:1 en los dispositivos móviles con las siguientes etiquetas meta:

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="HandheldFriendly" content="true">
    • sí, esta es la mejor solución, +1
    • ¿y si mi imagen necesidades de desplazamiento vertical, se puede utilizar la altura: *; en lugar de 100% ?
    • El dispositivo de desplazamiento vertical si la imagen es demasiado alto. No sé a qué altura:* es.
    • es lo mismo que «height: auto» he probado y funcionó bien. Gracias!
  2. 2

    Definir el estilo de la imagen con el siguiente:

    width: 100%;
    height: 100%;
    max-width: 800px;
    max-height: 600px;

    Esto ampliará el tamaño de la imagen para el padre de hasta 800×600.
    Asegúrese de que el elemento principal es también el ancho de la ventana.

  3. 2

    Puede utilizar consultas de medios CSS para este

    @media all and (max-width: 768px) {
    /* 768px is usually the width of tablets in portrait orientation */
    /* You can use any other size you see fit */
    
        img {width: 100%;}
    }

    Esto va a aplicar el estilo a la información sólo cuando la anchura es menor que la dada max-width.

Dejar respuesta

Please enter your comment!
Please enter your name here