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 ...
Código del ejemplo ...
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 ...
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>
No hay comentarios:
Publicar un comentario