En los diseños fluidos es fácil dar formato al texto para ajustarse bien cuando la ventana del navegador sea redimensionada, pero con las imágenes no suele ser tan sencillo el tema.
El rápido consejo que te damos en esta nota te enseñará cómo cambiar entre dos tamaños de imágenes distintos dependiendo del tamaño que posea la ventana del navegador en ese momento dado.
La técnica que utilizaremos puede usarse también para causar otros cambios en el redimensionamiento, más allá del simple cambio de las imágenes.
El HTML que necesitamos
<div id=”content”>
<img class=”fluidimage” src=”big.jpg”/>
<p>(Type words here)</p>
</div>
Es fundamental notar que adjuntamos .fluidimage a la imagen que deseamos “togglear”.
Y ahora el CSS
body{ text-align:center; }
img{ float: right; margin: 0px 10px 10px 10px;}
#content{ width:70%; margin: 0px auto; text-align: left; }
Para mantener la simplicidad en el CSS se ha excluido todo tipo de estilos gráficos, tales como bordes o fuentes.
Activando el cambio con jQuery
<script type=”text/javascript” src=”<a class=”linkification-ext” title=”Linkification: http://jqueryjs.googlecode.com/files/jquery-1.3.2.js” href=”http://jqueryjs.googlecode.com/files/jquery-1.3.2.js”>http://jqueryjs.googlecode.com/files/jquery-1.3.2.js</a>”></script>
<script type=”text/javascript”>
$(document).ready(function() {function imageresize() {
var contentwidth = $(’#content’).width();
if ((contentwidth) < ‘700′){
$(’.fluidimage’).attr(’src’,'little.jpg’);
} else {
$(’.fluidimage’).attr(’src’,'big.jpg’);
}
}imageresize();//Triggers when document first loads
$(window).bind(”resize”, function(){//Adjusts image when browser resized
imageresize();
});});
</script>
Cuando el documento esté preparado, establecemos una función (imageresize) que realiza el cambio de las imágenes dependiendo del ancho del navegador. Si el ancho del navegador es menos que 700px, se utilizará la imagen más pequeña, sino se mostrará la imagen de tamaño completo. Esta función se active ni bien carga la página y en cualquier momento que el navegador sea redimensionado.
¡Y listo!
Haz clic aquà para ver un demo»
Haz clic aquà para descargar esta técnica»
Fuente: Build Internet
Sábado, 1 de Diciembre de 2012 a las 05.16
Eencuentro muchos errors, intento arreglarlos y te cuento…
por ejemplo… la imagen queda a un lado de la web y no centrada y pues, no hace el resize
Miércoles, 5 de Diciembre de 2012 a las 17.30
como puedo modificar el tamaño de las fotos que puse con el jquery??
quiero agrandar el tamaño del contenedor pero no puedo, alguna ayuda?
Jueves, 4 de Abril de 2013 a las 12.50
Esto les puede funcionar
http://danncortes.com/ajuste-de-imagenes-jquery/