Responsive images sin JavaScript ni PHP

Isaac Clarke

En el marcado de esta página hemos incluido una única imagen, un GIF transparente de 1✕1 píxeles:


<p id="isaac-clarke">
  <img src="isaac_clarke.gif" alt="Isaac Clarke" />
</p>
		

La imagen que aparece es en realidad un fondo que aplicamos al GIF, con distintas hojas de estilo servidas a través de media queries.

Para un ancho de pantalla superior a 1240 píxeles:


Query

<link href="1240.css" rel="stylesheet" type="text/css" media="screen and (min-width: 1240px)" />  

Estilo

#isaac-clarke img{width:1200px;height:570px;background:url(ds2_1200x570.jpg);}     
        

Para un ancho de pantalla entre 960 y 1240 píxeles:


Query

<link href="960.css" rel="stylesheet" type="text/css" media="screen and (min-width: 760px) and (max-width: 960px)" />  

Estilo

#isaac-clarke img{width:920px;height:450px;background:url(ds2_920x450.jpg);}     
        

Para un ancho de pantalla entre 760 y 960 píxeles:


Query

<link href="760.css" rel="stylesheet" type="text/css" media="screen and (min-width: 760px) and (max-width: 960px)" />  

Estilo

#isaac-clarke img{width:720px;height:390px;background:url(ds2_720x390.jpg);     
        

Y, por último, para un ancho de pantalla inferior a 760 píxeles:


Query

<link href="400.css" rel="stylesheet" type="text/css" media="screen and (max-width: 760px)" />  

Estilo

#isaac-clarke img{width:360px;height:230px;background:url(ds2_360x230.jpg);}     
        

+ info: La entrada de nuestro blog | Media Queries