Tironemota

▲
Imágenes

Imágenes 21-08-2022

Carrusel

En esta ocasión, les presento un carrusel de imágenes que giran horizontalmente o verticalmente, el cual cuenta con links de enlace que nos permite dirigirnos a una de nuestras paginas o una externa, podemos utilizar cualquier tipo de imagen incluyendo gif animados.

//Colocar dentro del head
function carousel(params){
    if(!(params.width>0 && isFinite(params.width)))params.width=100;
    if(!(params.height>0 && isFinite(params.height)))params.height=100;
    if(!(params.sides>2 && isFinite(params.sides)))params.sides=4;
    if(!(params.steps>0 && params.steps<100 && isFinite(params.steps)))params.steps=20;
    if(!(params.speed>0 && isFinite(params.speed)))params.speed=8;
    if(!(params.image_border_width>=0 && isFinite(params.image_border_width)))params.image_border_width=0;
    if(isFinite(params.id)||!params.id)params.id='bad_id_given_'+Math.random();
    document.write("<div style='position:relative;overflow:hidden;' id='"+params.id.replace(/[^a-zA-Z0-9]+/g,'_')+"'></div>");
    var cdiv=document.getElementById(params.id.replace(/[^a-zA-Z0-9]+/g,'_'))
    cdiv.style.width=params.width+'px';
    cdiv.style.height=params.height+'px';
    cdiv.style.border=params.border;
    cdiv.style.position='relative';
    cdiv.style.overflow='hidden';
    cdiv.title=params.id;
    //--velocidad
    var counter=0,spinning=true,interval=Math.floor(60000/params.sides/params.steps/params.speed)-5;
    interval=isNaN(interval)?200:interval;
    var img_position=[],images=[],img_dimension=[];
    var img_index=params.images.length+1,img_index_cap=2*params.images.length;
    var faces=Math.ceil(params.sides/2), dimension, direction, targ, attr, faraway;
    function init(){
        if(params.direction=="left" || params.direction=="right"){
            direction=params.direction;
            dimension="width";
            }
        else if(params.direction=="top" || params.direction=="bottom"){
            direction=params.direction;
            dimension="height";
            }
        else {
            direction="left";
            dimension="width";
            }      
        faraway=(direction=="left"||direction=="top")?'-20000px':'20000px';
        cdiv.style[dimension]=params[dimension]/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)+'px';
        var img=new Image();
        img.style.position='absolute';
        img.style[direction]=faraway;
        img.style.width=params.width-2*params.image_border_width+'px';
        img.style.height=params.height-2*params.image_border_width+'px';
        img.style.border=(params.image_border_width||0)+'px solid '+params.image_border_color;
        for(var i=0;i<params.images.length;i++){
            images[i]=img.cloneNode(true);
            images[i].src=params.images[i];
            if(params.links && params.links[i] && params.links[i]!=''){
                targ=params.lnk_targets && params.lnk_targets[i]||params.lnk_base||'new';
                if(targ=="_blank"){
                    attr=(params.lnk_attr && params.lnk_attr[i])?",'"+params.lnk_attr[i]+"'":"";
                    images[i].onclick=new Function("window.open('"+params.links[i]+"','"+targ+"'"+attr+")");
                    }
                else if(targ.substr(0,1)=="_"){
                    images[i].onclick=new Function(targ.substr(1)+".location='"+params.links[i]+"'");
                    }
                else{
                    attr=(params.lnk_attr && params.lnk_attr[i])?",'"+params.lnk_attr[i]+"'":"";
                    images[i].onclick=new Function("var t='"+targ+"';if(window[t]){try{window[t].close()}catch(z){}}window[t]=window.open('"+params.links[i]+"',t"+attr+");window[t].focus()");
                    }
                images[i].style.cursor=document.all?'hand':'pointer';
                }
            if(params.titles && params.titles[i] && params.titles[i]!='')
                images[i].title=params.titles[i];
            if(document.all)
                images[i].alt=images[i].title;
            images[i+params.images.length]=images[i];
            if(params.images.length==faces)
                images[i+2*params.images.length]=images[i];
            cdiv.appendChild(images[i]);
            }
        var face_size=params.size_mode=='image'?params[dimension]:params[dimension]*Math.sin(Math.PI/params.sides);
        var face_offset=params[dimension]*Math.cos(Math.PI/params.sides)/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)/2-.5;
        var pi_piece=2*Math.PI/params.steps/params.sides;
        for(i=0;i<=params.steps*faces;i++){
            img_dimension[i]=face_size*Math.sin(pi_piece*i);
            img_position[i]=(i<params.steps*params.sides/2)?Math.floor(params[dimension]/2/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)-face_offset*Math.cos(pi_piece*i)-img_dimension[i]/2)+'px':faraway;
            img_dimension[i]=img_dimension[i]-2*params.image_border_width>1?Math.ceil(img_dimension[i])-2*params.image_border_width+'px':'1px';
            }
        }
    init();
    cdiv.rotate = function(){
        setTimeout('document.getElementById("'+cdiv.id+'").rotate()',interval);
        if(!spinning) return;
        if(++counter>=params.steps){
            counter=0;
            if(++img_index>=img_index_cap)
                img_index=params.images.length;
            }
        images[img_index-faces].style[direction]=faraway;
        for(var i=faces-1;i>=0;i--){
            images[img_index-i].style[direction]=img_position[counter+i*params.steps];
            images[img_index-i].style[dimension]=img_dimension[counter+i*params.steps];
            }
        }
    cdiv.onmouseover=function(){
        spinning=false;
        }
    cdiv.onmouseout=function(){
        spinning=true;
        }
    setTimeout('document.getElementById("'+cdiv.id+'").rotate()',100);
}

Carrusel Horizontal

//Colocar en sitio que lo desee de su página
carousel({id:'tironemota',
border:'',
size_mode:'image',
width:107, //ANCHO DE LA IMAGEN
height:140, //ALTO DE LA IMAGEN
sides:6, //LADOS DEL CARRUCEL (utiliza números pares por cada lado)
steps:60, //PASO DEL CARRUCEL
speed:5, //VELOCIDAD DEL CARRUCEL
direction:'left',
images:['URL DE LA IMAGEN','URL DE LA IMAGEN','URL DE LA IMAGEN','URL DE LA IMAGEN'],
links: ['URL DEL ENLACE','URL DEL ENLACE','URL DEL ENLACE','URL DEL ENLACE'],
lnk_base:'google', 
titles: ['TEXTO','TEXTO','TEXTO','TEXTO'],
image_border_width:1,
image_border_color:'blue'
});

Carrusel Vertical

//Colocar en sitio que lo desee de su página
carousel({id:'tironemota-2',
border:'',
size_mode:'image',
width:180, //ANCHO DE LA IMAGEN
height:140, //ALTO DE LA IMAGEN
sides:6, //LADOS DEL CARRUCEL (utiliza números pares por cada lado)
steps:100, //PASO DEL CARRUCEL
speed:5, //VELOCIDAD DEL CARRUCEL
direction:'top',
images:['URL DE LA IMAGEN','URL DE LA IMAGEN','URL DE LA IMAGEN','URL DE LA IMAGEN'],
links: ['URL DEL ENLACE','URL DEL ENLACE','URL DEL ENLACE','URL DEL ENLACE'],
lnk_base:'google', 
titles: ['TEXTO','TEXTO','TEXTO','TEXTO'],
image_border_width:1,
image_border_color:'blue'
});

Si no deseamos enlace solo colocamos links:[ ], en el caso de que estemos utilizando enlaces pero hay uno que no deseamos enlazar, colocamos links: ['URL DEL ENLACE', ' ', 'URL DEL ENLACE']

Arriba ... ⇑

Imagen cambia 21-08-2022

01/11.- Imagen cambia según la media query 21-08-2022

Con el elemento picture podemos cambiar de imagen según la media query.
(Minimice o cambie el ancho de pantalla para ver resultado)

Imagen 
<picture>
    <source srcset="URL-IMG-1" media="(min-width: 800px)">
    <source srcset="URL-IMG-2" media="(min-width: 600px)">
    <img srcset="URL-IMG-3" alt="Imagen">
</picture>
Imagen cambia ... ⇑

02/11.- Imagen cambia usando menú 21-08-2022

<img src="URL DE LA IMAGEN" width="128" height="96" border="0" name="Imagen">

<script>
var _img = new Array();
_img[0] = new Image(); _img[0].src="URL DE LA IMAGEN";
_img[1] = new Image(); _img[1].src="URL DE LA IMAGEN";
_img[2] = new Image(); _img[2].src="URL DE LA IMAGEN";
_img[3] = new Image(); _img[3].src="URL DE LA IMAGEN";
function cambiarA(_obj){
if(!_obj)return;
var _index = _obj.selectedIndex;
if(!_index)return;
var _item  = _obj[_index].value;
if(!_item)return;
if(_item<0 || _item >=_img.length)return;
document.images["Imagen"].src=_img[_item].src;
}
</script>

<form method="get">
<select onchange="cambiarA(this)">
    <option value="">Seleccionar Imagen</option>
    <option value="0">Imagen 1</option>
    <option value="1">Imagen 2</option>
    <option value="2">Imagen 3</option>
    <option value="3">Imagen 4</option>
</select>
</form>
Imagen cambia ... ⇑

03/11.- Imagen cambia al posar el puntero I 21-08-2022

Cambia al pasar el puntero entre dos imágenes de igual tamaño

<a onmouseover="document['fpAnimswapImgFP1'].imgRolln=document['fpAnimswapImgFP1'].src;document['fpAnimswapImgFP1'].src=document['fpAnimswapImgFP1'].lowsrc;" onmouseout="document['fpAnimswapImgFP1'].src=document['fpAnimswapImgFP1'].imgRolln" href="javascript:void(0)">
    <img id="fpAnimswapImgFP1" lowsrc="URL-DE-IMAGEN-1" style="border:0" name="fpAnimswapImgFP1" dynamicanimation="fpAnimswapImgFP1" src="URL-DE-IMAGEN-2"/>
</a>
Imagen cambia ... ⇑

04/11- Imagen cambia al posar el puntero II 21-08-2022

Cambia al posar el puntero y definimos el tamaño de las imágenes

<a onmouseover="document['fpAnimswapImgFP2'].imgRolln=document['fpAnimswapImgFP2'].src;document['fpAnimswapImgFP2'].src=document['fpAnimswapImgFP2'].lowsrc;" onmouseout="document['fpAnimswapImgFP2'].src=document['fpAnimswapImgFP2'].imgRolln" href="javascript:void(0)">
    <img id="fpAnimswapImgFP2" height="200" alt="" width="200" lowsrc="URL-DE-IMAGEN-1" style="border:0" name="fpAnimswapImgFP2" dynamicanimation="fpAnimswapImgFP2" src="URL-DE-IMAGEN-2"/>
</a>
Imagen cambia ... ⇑

05/11.- Imagen cambia al posar el puntero III 21-08-2022

ejemplo de rollover simple 
<a href= "URL-DEL-ENLACE" onclick="returnfalse;" onmouseover="document.ejemplo.src='URL-DE-IMAGEN-DOS';" onmouseout="document.ejemplo.src='URL-DE-IMAGEN-UNO';">
    <img name="ejemplo" src="URL-DE-IMAGEN-UNO" alt = "ejemplo de rollover simple"width="200" height="200" style="border:0">
</a>

<script>
    imagenOn = new Image(200,200);
    imagenOn.src = "URL-DE-IMAGEN-UNO";
</script>
Imagen cambia ... ⇑

06/11.- Imagen cambia al posar el puntero IV 21-08-2022

<img src="URL-DE-IMAGEN-UNO" onmouseover="this.src='URL-DE-IMAGEN-DOS';" onmouseout="this.src='URL-DE-IMAGEN-UNO';"/>

Cambia URL-DE-IMAGEN-UNO por la URL de la imagen que tendrás inicialmente, y URL-DE-IMAGEN-DOS por la URL de la imagen que cambiará al pasar el mouse. Trata que las dos imágenes tengan el mismo tamaño para conseguir un mejor resultado.

Imagen cambia ... ⇑

07/11.- Imagen cambia cada cierto tiempo I 21-08-2022

var delay=3000 //establecer retraso en milisegundos
var curindex=0
var randomimages=new Array()
randomimages[0]="URL DE LA IMAGEN"
randomimages[1]="URL DE LA IMAGEN"
randomimages[2]="URL DE LA IMAGEN"
randomimages[3]="URL DE LA IMAGEN"
randomimages[4]="URL DE LA IMAGEN"
var preload=new Array()
for (n=0;n<randomimages.length;n++){
    preload[n]=new Image()
    preload[n].src=randomimages[n]
}
document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">')
function rotateimage(){
    if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
        curindex=curindex==0? 1 : curindex-1
    }else
        curindex=tempindex
        document.images.defaultimage.src=randomimages[curindex]
}
setInterval("rotateimage()",delay)
Imagen cambia ... ⇑

08/11.- Imagen cambia cada cierto tiempo II 21-08-2022

<div class="rotaImg">
    <img src="URL-DE-IMAGEN" name="cube" style="filter:progid:DXImageTransform.Microsoft.Stretch(stretchStyle='PUSH')">
</div>
.rotaImg img {
        height:200px;
        width:auto;
        border:0;
    }
var specifyimage=new Array() //Sus imagenes
    specifyimage[0]="URL-DE-IMAGEN"
    specifyimage[1]="URL-DE-IMAGEN"
    specifyimage[2]="URL-DE-IMAGEN"
    specifyimage[3]="URL-DE-IMAGEN"
    var delay=3000 //3 segundos
    //Contador para el array
    var count =1;
    var cubeimage=new Array()
    for (i=0;i<specifyimage.length;i++){
        cubeimage[i]=new Image()
        cubeimage[i].src=specifyimage[i]
    }
    function movecube(){
        if (window.createPopup)
            cube.filters[0].apply()
            document.images.cube.src=cubeimage[count].src;
        if (window.createPopup)
            cube.filters[0].play()
            count++;
        if (count==cubeimage.length)
            count=0;
        setTimeout("movecube()",delay)
    }
    window.onload=new Function("setTimeout('movecube()',delay)")
Imagen cambia ... ⇑

09/11.- Imagen cambia al actualizar página I 21-08-2022

Imágenes que rotan cada vez que actualice la página. Pulse F5 para actualizar la página y verá como cambia la imagen. Cuenta con un texto al pie de la imagen con enlace.

Copie el siguiente código y cambie solo los datos resaltados en color

var how_many_ads = 4;
var now = new Date()
var sec = now.getSeconds()
var ad = sec % how_many_ads;
ad +=1;
if (ad==1) {
    txt="Texto al pie de la imagen";
    url="URL-DEL-ENLACE";
    alt="Texto alternativo de la imagen";
    banner="URL-DE-IMAGEN";
    width="225";
    height="300";
}
if (ad==2) {
    txt="Texto al pie de la imagen";
    url="URL-DEL-ENLACE";
    alt="Texto alternativo de la imagen";
    banner="URL-DE-IMAGEN";
    width="225";
    height="300";
}
if (ad==3) {
    txt="Texto al pie de la imagen";
    url="URL-DEL-ENLACE";
    alt="Texto alternativo de la imagen";
    banner="URL-DE-IMAGEN";
    width="225";
    height="300";
}
if (ad==4) {
    txt="Texto al pie de la imagen";
    url="URL-DEL-ENLACE";
    alt="Texto alternativo de la imagen";
    banner="URL-DE-IMAGEN";
    width="225";
    height="300";
}
document.write('<center>');
document.write('<a href="' + url + '" target="_blank">');
document.write('<img src="' + banner + '" width=')
document.write(width + ' height=' + height + ' ');
document.write('alt="' + alt + '" border=0><br>');
document.write('<small>' + txt + '</small></a>');
document.write('</center>');

Solo tenemos que cambiar los datos resaltados a color:

  • var how_many_ads = 3; número de imagenes a mostrar
  • URL-DE-IMAGEN la dirección de las imagenes en nuestra web.
  • URL-DEL-ENLACE nuestra imagen.
  • Texto alternativo de la imagen el cual veremos si la imagen no se encuentra.
  • Texto al pie de la imagen texto de enlace o titulo de imagen.
  • width="225"; height="300"; ancho y alto de la imagen.
  • target="_blank" Indica como debe abrir la nueva página.
Imagen cambia ... ⇑

10/11.- Imagen cambia al actualizar página II 21-08-2022

var img_width = "200";
var img_height = "300";
var img_alt = "Click sobre la imagen";
var ad=new Array()
//Insertar dirección de la imagen
ad[0]='URL DE LA IMAGEN';
ad[1]='URL DE LA IMAGEN';
ad[2]='URL DE LA IMAGEN';
ad[3]='URL DE LA IMAGEN';
ad[4]='URL DE LA IMAGEN';
var links=new Array()
//Insertar la dirección del enlace
links[0]='URL DEL ENLACE';
links[1]='URL DEL ENLACE';
links[2]='URL DEL ENLACE';
links[3]='URL DEL ENLACE';
links[4]='URL DEL ENLACE';
var xy=Math.floor(Math.random()*ad.length);
document.write('<a href="'+links[xy]+'" target="_blank"><img src="'+ad[xy]+'" width="'+img_width+'" height="'+img_height+'" alt="'+img_alt+'"></a>');

Solo tenemos que cambiar los datos resaltados a color:

  • var img_width = "200"; Variable con el ancho de la imagen
  • var img_height = "300"; Variable con el alto de la imagen
  • var img_alt = "Click sobre la imagen"; Variable con texto alternativo de la imagen
  • URL DE LA IMAGEN Dirección de la imagen
  • URL DEL ENLACE Dirección del enlace.
  • target="_blank" Indica como debe abrir la nueva página.
Imagen cambia ... ⇑

11/11.- Slideshow (Diapositivas) 21-08-2022

Colocar en sitio que lo desee de su página

<script>
//["Imagen", "Url de enlace", "Url-target"]
var myimages=new Array()
myimages[0]=["URL DE LA IMAGEN", "", ""]
myimages[1]=["URL DE LA IMAGEN", "URL DEL ENLACE", ""]
myimages[2]=["URL DE LA IMAGEN", "URL DEL ENLACE", "URL DE TARGET"]
//Ancho, alto, velocidad
new dropinslideshow(myimages, 267, 200, 3000)
</script>

Colocar entre las etiqueta <head>. . . .</head>

<script>
var _dropinslideshowcount=0
function dropinslideshow(imgarray, w, h, delay){
    this.id="_dropslide"+(++_dropinslideshowcount)
    this.createcontainer(parseInt(w), parseInt(h))
    this.delay=delay
    this.imgarray=imgarray
    var preloadimages=[]
    for (var i=0; i<imgarray.length; i++){
        preloadimages[i]=new Image()
        preloadimages[i].src=imgarray[i][0]
    }
    this.animatestartpos=parseInt(h)*(-1)
    this.slidedegree=10 //velocidad de paso
    this.slidedelay=30 //velocidad de presentación
    this.activecanvasindex=0
    this.curimageindex=0
    this.zindex=100
    this.isMouseover=0
    this.init()
}
dropinslideshow.prototype.createcontainer=function(w, h){
    document.write('<div id="'+this.id+'" style="position:relative; width:'+w+'px; height:'+h+'px; overflow:hidden">')
    document.write('<div style="position:absolute; width:'+w+'px; height:'+h+'px; top:0;"></div>')
    document.write('<div style="position:absolute; width:'+w+'px; height:'+h+'px; top:-'+h+'px;"></div>')
    document.write('</div>')
    this.slideshowref=document.getElementById(this.id)
    this.canvases=[]
    this.canvases[0]=this.slideshowref.childNodes[0]
    this.canvases[1]=this.slideshowref.childNodes[1]
}
dropinslideshow.prototype.populatecanvas=function(canvas, imageindex){
    var imageHTML='<img src="'+this.imgarray[imageindex][0]+'" style="border: 0" />'
    if (this.imgarray[imageindex][1]!="")
        imageHTML='<a href="'+this.imgarray[imageindex][1]+'" target="'+this.imgarray[imageindex][2]+'">'+imageHTML+'</a>'
    canvas.innerHTML=imageHTML
}
dropinslideshow.prototype.animateslide=function(){
    if (this.curimagepos<0){
        this.curimagepos=this.curimagepos+this.slidedegree
        this.activecanvas.style.top=this.curimagepos+"px"
    }
    else{
        clearInterval(this.animatetimer)
        this.activecanvas.style.top=0
        this.setupnextslide()
        var slideshow=this
        setTimeout(function(){slideshow.rotateslide()}, this.delay)
    }
}
dropinslideshow.prototype.setupnextslide=function(){
    this.activecanvasindex=(this.activecanvasindex==0)? 1 : 0
    this.activecanvas=this.canvases[this.activecanvasindex]
    this.activecanvas.style.top=this.animatestartpos+"px"
    this.curimagepos=this.animatestartpos
    this.activecanvas.style.zIndex=(++this.zindex)
    this.curimageindex=(this.curimageindex<this.imgarray.length-1)? this.curimageindex+1 : 0
    this.populatecanvas(this.activecanvas, this.curimageindex)
}
dropinslideshow.prototype.rotateslide=function(){
    var slideshow=this
    if (this.isMouseover)
        setTimeout(function(){slideshow.rotateslide()}, 50)
    else
        this.animatetimer=setInterval(function(){slideshow.animateslide()}, this.slidedelay)
}
dropinslideshow.prototype.init=function(){
    var slideshow=this
    this.populatecanvas(this.canvases[this.activecanvasindex], 0)
    this.setupnextslide()
    this.slideshowref.onmouseover=function(){slideshow.isMouseover=1}
    this.slideshowref.onmouseout=function(){slideshow.isMouseover=0}
    setTimeout(function(){slideshow.rotateslide()}, this.delay)
}
</script>
Imagen cambia ... ⇑
Arriba ... ⇑

Imágenes opacas 21-08-2022

1/3.- Imagen con opacidad y color normal al posar el puntero 21-08-2022

<img
    style="opacity: 0.2; filter:alpha(opacity=20);"
    src="URL-DE-IMAGEN"
    onmouseover="this.style.opacity=1;this.filters.alpha.opacity='100';"
    onmouseout="this.style.opacity=0.2;this.filters.alpha.opacity='20';"
/>
Imágenes opacas ... ⇑

2/3.- Imagen normal y efecto de opacidad al posar el puntero 21-08-2022

<img
    src="URL-DE-IMAGEN"
    onmouseout="this.style.opacity=1;this.filters.alpha.opacity='100';"
    onmouseover="this.style.opacity=0.2;this.filters.alpha.opacity='20';"
/>
Imágenes opacas ... ⇑

3/3.- Opacidad al posar el puntero con CSS 21-08-2022

<img src="URL-DE-IMAGEN" class="imgOpaca"/>
.imgOpaca:hover {
    zoom: 1;
    filter: alpha(opacity=50);
    opacity: 0.5;
    -webkit-transition: opacity .15s ease-in-out;
    -moz-transition: opacity .15s ease-in-out;
    -ms-transition: opacity .15s ease-in-out;
    -o-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out;
}
Imágenes opacas ... ⇑
Arriba ... ⇑

Efecto zoom 21-08-2022

Efecto de zoom en una imagen y texto con CSS3

Efecto de zoom con CSS3

<div style="text-align:center;">
    <p class="zoom">Efecto de zoom con CSS3</p>
    <img class="zoom" src="URL-DE-LA-IMAGEN" />
</div>
.zoom{
    /* Aumentamos la anchura y altura durante 2 segundos */
    transition: width 2s, height 2s, transform 2s;
}
.zoom:hover{
    /* tranformamos el elemento al pasar el mouse por encima al doble de su tamaño con scale(2). */
    transform : scale(2);
}
Arriba ... ⇑

Redimensionar imagen 22-08-2022

Redimensionar una imagen proporcionalmente con CSS

Por ejemplo, cuando escribimos un post y nuestro ancho máximo es de 650px pero nuestra imagen es de 700px, lo que podemos hacer en nuestro CSS, es ordenar que el ancho máximo de nuestra imagen sea de 650px, el problema con esto es que nuestra imagen quedará comprimida pero solamente horizontalmente.

Asignándole a la imagen un max-width, lo que haremos solamente es redimensionarla horizontalmente, de esta manera la imagen se verá desproporcionada como vemos en el ejemplo:

Imagen con tamaño normal

679px X 455px

Autana

Imagen redimensionada horizontalmente

.redimensiona1img { max-width : 250px; }

Autana

Imagen redimensionada proporcionalmente

.redimensiona2img { max-width : 250px; height : auto; }

Autana

Adaptar una imagen para un diseño responsive

Para hacer imágenes responsive solamente tenemos que modificar el atributo max-width.

.redimensiona3img { max-width : 100%; height : auto; }

Ejemplo

Amplié y disminuya el tamaño de la pantalla, para apreciar el comportamiento de las imágenes.

Autana
Arriba ... ⇑

Imagen Responsive 22-08-2022

Supongamos que tenemos una imagen de 400 píxeles de ancho por 300 píxeles de alto. Pues bien, ver esta imagen a tamaño real requiere de un dispositivo con un ancho como mínimo de 400px, ya que una resolución inferior requeriría de scroll horizontal, y esto, a menos que sea imprescindible, vamos a tratar siempre de erradicarlo.

La opción a día de hoy más factible es redimensionar dicha imagen con respecto al contenedor, para así hacerla adaptable a las distintas resoluciones posibles. y esto sólo es posible olvidándonos de la unidad píxel, y pensando en unidades relativas.

Olvídate igualmente en tener varias imágenes en píxeles concretos para según qué dispositivo (iphone 5 o una determinada tablet). El mundo de los dispositivos cambia muy rápido, y día a día salen al mercado nuevos elementos con conexión a Internet, y con resoluciones de lo más variadas. Con el trabajo que cuesta seleccionar buenas imágenes de bancos.

1.- CSS y las imágenes responsive

Sigamos con nuestra imagen de 400px de ancho. Vamos a declarar que dicha imagen tenga un ancho relativo. En este caso del 100%

img { width: 100% }

Bien, con esto hemos logrado desprendernos de los píxeles. Ahora la imagen siempre se ajustará a su contenedor. Si está dentro de un artículo, ocupará el 100% del ancho de dicho artículo. Si está dentro de un widget en el sidebar o aside (elemento HTML5), siempre ocupará el 100% del ancho de dicho widget. Perfecto. Hemos pasado de una imagen de ancho fijo a una imagen fluida.

Vayamos al siguiente nivel. Tener una imagen fluida está genial, ya podemos empezar a utilizar el poder de las imágenes. El problema es: ¿Que pasa cuando nuestro contenedor supera el tamaño en píxeles de la imagen?. Supongamos un contenedor de 1200 píxeles. ¿Que hace nuestra imagen fluida? Llenar el 100% del espacio. Por lo tanto, nuestra imagen de 400px pasa a convertirse en una imagen de 1200px. Responsive total, eso sí, pero pixelada, eso también. Esto no es buena idea.

Tenemos que conseguir que dicha imagen sea fluida, pero hasta un límite! Solución: la regla CSS max-width. Mediante dicha regla vamos a indicar que la imagen tenga su ancho en píxeles, pero que como máximo, siempre esté al 100% de la anchura del contenedor. Dicho de forma clara:

  • Si el contenedor tiene 300px: nuestra imagen 300px (max-width: 100%)
  • Si el contenedor tiene 400px: nuestra imagen 400px (max-width: 100%)
  • Si el contenedor tiene 1200px: nuestra imagen se queda en 400px!

Tenemos lo bueno de las imágenes fluidas y no tenemos pixelación por exceso de estiramiento.

img { max-width: 100% }

2.- Alto ( height ) en imágenes responsives.

Con el valor height la cosa cambia un poco. Normalmente solemos guiarnos por el ancho de los dispositivos y contenedores para ubicar nuestro contenido. Rara vez en diseño web el valor height es un elemento a tener en cuenta. Existen webs con navegación horizontal, pero la mayoría suelen ser en vertical, por lo tanto son valores a los que no se les presenta mucho control.

Sin embargo, es interesante su uso en diseño web con elementos fijos, por ejemplo un menú de navegación fixed, al que seguramente tengamos que definir un alto concreto. Pero más allá de esto, y volviendo con las imágenes responsive, lo mejor para el alto es indicar un valor auto, es decir, delegar al explorador que calcule el alto del elemento.

En la mayoría de los casos, esto hará que el alto no pierda proporción con respecto al ancho. Si el ancho de la imagen se reduce para adaptarse a responsive, el alto también lo hace. Si el ancho se queda fijo, el alto también lo hará. Así que completemos nuestra regla para imágenes responsives:

img { height: auto; max-width: 100%; }

Con esto tendremos listo nuestra web para que todas las imágenes sean responsive.

Arriba ... ⇑