cambiar las dimensiones de la imagen con jquery

Tengo una imagen en div id myimage. Ahora quiero redimensionarlo usando el cambio. Quiero desde el cuadro de selección si está seleccionado 700X7000, entonces el tamaño de la imagen será de 700px de alto y 700px de ancho. Sin recargar la página. ¿Alguien me puede ayudar cómo puedo hacer esto?cambiar las dimensiones de la imagen con jquery

Fuente

2011-07-01 DAKSH

alguien podría querer me auditar en esto - pero podría no crear un div para el img, y establecer el img 'max-width' al 100% y cambiar el tamaño de la div consecuencia ? – Nic

@melee: creo que puedes hacer eso para la imagen directamente. – Blender

Bueno, para cambiarlo, sólo puede establecer de la imagen width() y height():

$('#myimage').width(700); // Units are assumed to be pixels 
$('#myimage').height(700);

Así que para que usted pueda hacer el cuadro desplegable, sólo puede establecer los valores a ser algo así como 100x100, 200x200 , etc., y split el valor seleccionado para extraer las dimensiones:

var parts = '100x100'.split('x'); 
var width = parseInt(parts[0], 10); // 10 forces parseInt to use base 10 
var height = parseInt(parts[1], 10);

Fuente

2011-07-01 16:54:13 Blender

la condición es donde se puede decir elemento seleccionado.

if(condition) { 
    $('div#myimage img').css({'width' : '700px' , 'height' : '700px'}); 
} 
else { 
    $('div#myimage img').css({'width' : '150px' , 'height' : '150px'}); 
};

A continuación se presentan formas de comprobar para ver si se selecciona la casilla:

// First way 
$('#checkBox').attr('checked'); 

// Second way 
$('#checkBox').is(':checked');

Ejemplo de trabajo:

if($('#checkBox').attr('checked')) { 
    $('div#myimage img').css({'width' : '700px' , 'height' : '700px'}); 
} 
else { 
    $('div#myimage img').css({'width' : '150px' , 'height' : '150px'}); 
};

Fuente

2011-07-01 17:08:05 user764728

Función Objeto de envío

<img onLoad="ozhpixel(this)" 

function ozhpixel(imaj){ 
$(imaj).width(100); // Units are assumed to be pixels 
$(imaj).height(50);}

Fuente

2014-10-28 09:37:11 alpc

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

    <script> 
     $(document).ready(function() { 
      $("#photograph").click(function() { 
       $("img").animate({ 

        height: '+=5px', 
        width: '+=5px' 
       }); 
      }); 
     }); 


     } 
</script> 
</head> 
<body> 
    <div> 
     <img src="photo/grass.jpg" id="photograph" style="width:304px;height:228px;"/> 
    </div> 

</body> 
</html>

violín: https://jsfiddle.net/cmxevnp0/3/

Fuente

2015-09-04 08:56:25

Explica tu respuesta, ya sea con palabras o un violín. Hazlo más humano. –

cambiar las dimensiones de la imagen con jquery

Respuesta

Cuestiones relacionadas