viernes, 2 de agosto de 2013

Responsive Design para imágenes

A continuación podrás ver una simulación de una pantalla web a través de un marco que podrá adquirir distintas dimensiones y comprobar como la imagen se adapta a las distintas resoluciones, para ello utilizaremos CSS para establecer las dimensiones en porcetanjes.

img
{
width: 100%;
height: 100%;
min-width: 0%;
min-height: 0%;
max-width: 100%;
max-height: 100%;}

Si le aplicamos estos estilos css, la imagen se irá adaptando a las distintas resoluciones del div o contenedor donde se encuentre ubicada la imagen.

Ejemplo de marco web con distintas resoluciones con una imagen adaptitva ...


150X150 200X200 300X300 400X400


Código del ejemplo ...
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(function()
{
$(":input[name='responsive']").click(function()
{
switch($(this).val())
{
case "0":
$("#marco").css({width: "150px", height: "150px"});
break;

case "1":
$("#marco").css({width: "200px", height: "200px"});
break;

case "2":
$("#marco").css({width: "300px", height: "300px"});
break;

case "3":
$("#marco").css({width: "400px", height: "400px"});
break;
}
});
});
</script>

<style>

#marco
{
width: 150px;
height: 150px;
}

#marco img
{
width: 100%;
height: 100%;
min-width: 0%;
min-height: 0%;
max-width: 100%;
max-height: 100%;
}
</style>

</head>
<body>

<label>Simulación de tamaños en un marco y ajuste de la imagen - Responsive Design</label>
<form>
<input type="radio" name="responsive" value="0" checked> 150X150
<input type="radio" name="responsive" value="1"> 200X200
<input type="radio" name="responsive" value="2"> 300X300
<input type="radio" name="responsive" value="3"> 400X400
</form>

<div id="marco" style="border: 1px solid grey; padding: 10px;">
<img src="https://lh6.googleusercontent.com/-ysBvbSjGMkc/AAAAAAAAAAI/AAAAAAAAAAk/Vv35fNlTOPQ/photo.jpg">
</div>

</body>
</html>