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
5
A
Respuesta
23
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);
4
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'});
};
0
O
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);}
1
<!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/
+2
Explica tu respuesta, ya sea con palabras o un violín. Hazlo más humano. –
Cuestiones relacionadas
- 1. Revisar las dimensiones de la imagen subida
- 2. Configuración de las dimensiones de UIImage en la imagen UITableViewCell
- 3. PHP GD, imagecreatefromstring(); cómo obtener las dimensiones de la imagen?
- 4. HTML Chrome Audit Especificar las dimensiones de la imagen
- 5. Cómo cambiar el orden de las dimensiones de la matriz
- 6. android: obtenga las dimensiones de la imagen sin abrirlo
- 7. Cómo bloquear las dimensiones de la imagen en MATLAB
- 8. iOS: cómo obtener las dimensiones de la imagen sin abrirlo
- 9. jQuery de palanca para cambiar la imagen
- 10. jQuery Cambiar imagen src con Fade Effect
- 11. SCSS - Obtener dimensiones de imagen
- 12. Tamaño de imagen automático basado en las dimensiones de la ventana del navegador
- 13. imagen Paperclip Dimensiones validador personalizado
- 14. Contenedor de Fancybox que no se auto-dimensiona correctamente en las dimensiones de la imagen
- 15. Cambiar una imagen usando jQuery
- 16. Obtener dimensiones de imagen con Javascript antes de que la imagen se cargue completamente
- 17. ¿Establecer las dimensiones de la imagen con CSS es "bueno" como configurarlas en HTML?
- 18. Captura de pantalla de la forma cuyas dimensiones son mayores que las dimensiones de la pantalla
- 19. Tamaño máximo de archivo de imagen JPEG con dimensiones conocidas
- 20. Especificando las dimensiones de la imagen en HTML vs CSS para la carga de la página
- 21. Extraer dimensiones de la imagen de Base64 Cadena
- 22. hacer una imagen rota respeto dimensiones CSS
- 23. Obteniendo las dimensiones de un elemento con SCSS?
- 24. ¿Encontrar las dimensiones de la ventana X11?
- 25. Obtener dimensiones de la imagen sin leer todo el archivo
- 26. Forma rápida de obtener las dimensiones de la imagen (sin tamaño de archivo)
- 27. Jquery cambiar imagen al hacer clic
- 28. Cambiar la imagen alt con Javascript onclick
- 29. Determinar las dimensiones de CCLabelTTF
- 30. cambiar la imagen onConfigurationChanged
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