Pantallas Retina, imágenes de fondo de alta resolución


102

Esto puede parecer una pregunta tonta.

Si utilizo este fragmento de CSS para pantallas regulares (donde box-bg.pnges 200px por 200px);

.box{
    background:url('images/box-bg.png') no-repeat top left;
    width:200px;
    height:200px
}

y si uso una consulta de medios como esta para apuntar a pantallas de retina (con la imagen @ 2x siendo la versión de alta resolución);

@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

    .box{background:url('images/box-bg@2x.png') no-repeat top left;}
}

¿Necesito duplicar el tamaño del .boxdiv a 400px por 400px para que coincida con la nueva imagen de fondo de alta resolución?


¿Cuál es la dimensión de images/box-bg@2x.png? Por favor, plantee la pregunta para que quede absolutamente claro.
TMS

Respuestas:


184

¿Necesito duplicar el tamaño del .box div a 400px por 400px para que coincida con la nueva imagen de fondo de alta resolución?

No, pero debe configurar la background-sizepropiedad para que coincida con las dimensiones originales:

@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

    .box{
        background:url('images/box-bg@2x.png') no-repeat top left;
        background-size: 200px 200px;
    }
}

EDITAR

Para agregar un poco más a esta respuesta, aquí está la consulta de detección de retina que suelo usar:

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 

}

- Fuente

NÓTESE BIEN. Esto min--moz-device-pixel-ratio:no es un error tipográfico. Es un error bien documentado en ciertas versiones de Firefox y debería escribirse así para admitir versiones anteriores (anteriores a Firefox 16). - Fuente


Como @LiamNewmarch mencionó en los comentarios a continuación, puede incluir background-sizeen su backgrounddeclaración taquigráfica así:

.box{
    background:url('images/box-bg@2x.png') no-repeat top left / 200px 200px;
}

Sin embargo, personalmente no recomendaría usar el formulario abreviado, ya que no es compatible con iOS <= 6 o Android, lo que lo hace poco confiable en la mayoría de las situaciones.


¿Algún consejo que ofrecería para configurar el tamaño de fondo para un fondo de página completa? sé el ancho del componente x, pero ¿qué tal el y?
Randy L

3
@theOther En ese caso, probablemente desee utilizar background-size: cover;. Esto mantendrá la relación de aspecto mientras "cubre" todo el fondo con la imagen.
Nabo

4
Si desea, puede integrar la background-sizepropiedad en el backgroundmodo: background: url('images/box-bg@2x.png') no-repeat top left / 200px 200px. Tenga en cuenta que los navegadores que no lo admitan background-sizeignorarán esta regla.
Liam Newmarch

2
@LiamNewmarch No lo recomendaría a mí mismo, ya que Android no parece entender la forma abreviada
Turnip

@ 3rror404 ah está bien, lo suficientemente justo. ¡Gracias!
Liam Newmarch

16

Aquí hay una solución que también incluye dispositivos High (er) DPI ( MDPI ) > ~ 160 puntos por pulgada como bastantes dispositivos que no son iOS (fe: Google Nexus 7 2012 ):

.box {
    background: url( 'img/box-bg.png' ) no-repeat top left;
    width: 200px;
    height: 200px;
}
@media only screen and ( -webkit-min-device-pixel-ratio: 1.3 ),
       only screen and (    min--moz-device-pixel-ratio: 1.3 ),
       only screen and (      -o-min-device-pixel-ratio: 2.6/2 ), /* returns 1.3, see Dev.Opera */
       only screen and (         min-device-pixel-ratio: 1.3 ),
       only screen and ( min-resolution: 124.8dpi ),
       only screen and ( min-resolution: 1.3dppx ) {

       .box {
           background: url( 'img/box-bg@2x.png' ) no-repeat top left / 200px 200px;
       }

}

Como @ 3rror404 incluyó en su edición después de recibir comentarios de los comentarios, hay un mundo más allá de Webkit / iPhone. Una cosa que me molesta con la mayoría de las soluciones hasta ahora, como la que se menciona como fuente arriba en CSS-Tricks , es que esto no se tiene completamente en cuenta.
La fuente original ya fue más allá.

Como ejemplo, el Nexus 7 (2012) pantalla es una pantalla tvdpi con un extraño device-pixel-ratiode1.325 . Cuando se cargan las imágenes con resolución normal, se amplían mediante interpolación y, por lo tanto, se ven borrosas. Para mí, la aplicación de esta regla en la consulta de medios para incluir esos dispositivos logró obtener los mejores comentarios de los clientes.


1
Una imagen 2x de cada dimensión tiene exactamente 4x los píxeles (por ejemplo, teóricamente se puede esperar que tenga un tamaño de 4x), mientras que 1.325 * 1.325 solo admite un aumento de 1.755625 en píxeles. Creo que la calidad de la imagen se perdería de cualquier manera con 1.325dppi, pero si usa HiDPI, entonces el cliente simplemente tendrá que esperar más tiempo para cargar la página, tendrá un mayor consumo de energía al cambiar el tamaño de la imagen (y las tablas de Nexus 7 son bastante conocido por reinicios aleatorios) y consumen más ancho de banda. Por lo tanto, recomendaría que se @2xquede solo con que se sirva a 2dppx+ clientes.
cnst

3

Si planea usar la misma imagen para la pantalla retina y no retina, aquí está la solución. Digamos que tiene una imagen de 200x200y tiene dos íconos en la fila superior y dos íconos en la fila inferior. Entonces, son cuatro cuadrantes.

.sprite-of-icons {
  background: url("../images/icons-in-four-quad-of-200by200.png") no-repeat;
  background-size: 100px 100px /* Scale it down to 50% rather using 200x200 */
}

.sp-logo-1 { background-position: 0 0; }

/* Reduce positioning of the icons down to 50% rather using -50px */
.sp-logo-2 { background-position: -25px 0 }
.sp-logo-3 { background-position: 0 -25px }
.sp-logo-3 { background-position: -25px -25px }

Al escalar y posicionar los íconos de sprites al 50% del valor real, puede obtener el resultado esperado.


Otra práctica solución de mezcla de SCSS de Ryan Benhase .

/****************************
 HIGH PPI DISPLAY BACKGROUNDS
*****************************/

@mixin background-2x($path, $ext: "png", $w: auto, $h: auto, $pos: left top, $repeat: no-repeat) {

  $at1x_path: "#{$path}.#{$ext}";
  $at2x_path: "#{$path}@2x.#{$ext}";

  background-image: url("#{$at1x_path}");
  background-size: $w $h;
  background-position: $pos;
  background-repeat: $repeat;

  @media all and (-webkit-min-device-pixel-ratio : 1.5),
  all and (-o-min-device-pixel-ratio: 3/2),
  all and (min--moz-device-pixel-ratio: 1.5),
  all and (min-device-pixel-ratio: 1.5) {
    background-image: url("#{$at2x_path}"); 
  }
}

div.background {
  @include background-2x( 'path/to/image', 'jpg', 100px, 100px, center center, repeat-x );
}

Para obtener más información sobre el mixin anterior, LEA AQUÍ .

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.