javascript - imagenes - input type image submit
Javascript Image Resize (13)
En lugar de modificar los atributos de altura y ancho de la imagen, intente modificar el alto y el ancho del CSS.
myimg = document.getElementById(''myimg'');
myimg.style.height = "50px";
myimg.style.width = "50px";
Un "truco" común es que los estilos de alto y ancho son cadenas que incluyen una unidad, como "px" en el ejemplo anterior.
Editar: creo que establecer el alto y ancho directamente en lugar de usar style.height y style.width debería funcionar. También tendría la ventaja de tener las dimensiones originales. ¿Puedes publicar un poco de tu código? ¿Estás seguro de que estás en el modo estándar en lugar del modo peculiar?
Esto debería funcionar:
myimg = document.getElementById(''myimg'');
myimg.height = myimg.height * 2;
myimg.width = myimg.width * 2;
¿Alguien sabe cómo cambiar el tamaño de la imagen proporcionalmente usando JavaScript? He intentado modificar los atributos de alto y ancho de los DOM sobre la marcha, pero parece que no funcionó en IE6.
Probé el siguiente código, funcionó bien en IE6 en WinXP Pro SP3.
function Resize(imgId)
{
var img = document.getElementById(imgId);
var w = img.width, h = img.height;
w /= 2; h /= 2;
img.width = w; img.height = h;
}
También está bien en FF3 y Opera 9.26.
Para modificar una imagen de forma proporcional, simplemente modifique una de las propiedades de ancho / alto de css, deje el otro conjunto en automático.
image.style.width = ''50%''
image.style.height = ''auto''
Esto asegurará que su relación de aspecto permanezca igual.
Tenga en cuenta que los navegadores tienden a absorber el tamaño de las imágenes: probablemente encontrará que su tamaño de imagen se ve horrible.
está bien resuelto, aquí está mi código final
if($(this).width() > $(this).height()) {
$(this).css(''width'',MaxPreviewDimension+''px'');
$(this).css(''height'',''auto'');
} else {
$(this).css(''height'',MaxPreviewDimension+''px'');
$(this).css(''width'',''auto'');
}
Gracias chicos
function resize_image(image, w, h) {
if (typeof(image) != ''object'') image = document.getElementById(image);
if (w == null || w == undefined)
w = (h / image.clientHeight) * image.clientWidth;
if (h == null || h == undefined)
h = (w / image.clientWidth) * image.clientHeight;
image.style[''height''] = h + ''px'';
image.style[''width''] = w + ''px'';
return;
}
simplemente páselo ya sea un elemento img DOM, o la identificación de un elemento de imagen, y el nuevo ancho y alto.
o puede pasarlo solo el ancho o solo la altura (si solo es la altura, luego pasar el ancho como nulo o indefinido) y cambiará el tamaño manteniendo la relación de aspecto
Use JQuery
var scale=0.5;
minWidth=50;
minHeight=100;
if($("#id img").width()*scale>minWidth && $("#id img").height()*scale >minHeight)
{
$("#id img").width($("#id img").width()*scale);
$("#id img").height($("#id img").height()*scale);
}
Prueba esto..
<html>
<body>
<head>
<script type="text/javascript">
function splitString()
{
var myDimen=document.getElementById("dimen").value;
var splitDimen = myDimen.split("*");
document.getElementById("myImage").width=splitDimen[0];
document.getElementById("myImage").height=splitDimen[1];
}
</script>
</head>
<h2>Norwegian Mountain Trip</h2>
<img border="0" id="myImage" src="..." alt="Pulpit rock" width="304" height="228" /><br>
<input type="text" id="dimen" name="dimension" />
<input type="submit" value="Submit" Onclick ="splitString()"/>
</body>
</html>
En el cuadro de texto, indique la dimensión como desee, en el formato 50 * 60. Haga clic en enviar. Obtendrás la imagen redimensionada. Dale a tu imagen la ruta en lugar de puntos en la etiqueta de la imagen.
No tienes que hacerlo con Javascript. Solo puede crear una clase CSS y aplicarla a su etiqueta.
.preview_image{
width: 300px;
height: auto;
border: 0px;
}
Ejemplo: cómo cambiar el tamaño con un porcentaje
<head>
<script type="text/javascript">
var CreateNewImage = function (url, value) {
var img = new Image;
img.src = url;
img.width = img.width * (1 + (value / 100));
img.height = img.height * (1 + (value / 100));
var container = document.getElementById ("container");
container.appendChild (img);
}
</script>
</head>
<body>
<button onclick="CreateNewImage (''http://www.medellin.gov.co/transito/images_jq/imagen5.jpg'', 40);">Zoom +40%</button>
<button onclick="CreateNewImage (''http://www.medellin.gov.co/transito/images_jq/imagen5.jpg'', 60);">Zoom +50%</button>
<div id="container"></div>
</body>
para cambiar el tamaño de la imagen en javascript:
$(window).load(function() {
mitad();doble();
});
function mitad(){
imag0.width=imag0.width/2;
imag0.height=imag0.height/2;
}
function doble(){
imag0.width=imag0.width*2;
imag0.height=imag0.height*2;}
imag0 es el nombre de la imagen:
<img src="xxx.jpg" name="imag0">
esto funciona para todos los casos
function resizeImg(imgId) {
var img = document.getElementById(imgId);
var $img = $(img);
var maxWidth = 110;
var maxHeight = 100;
var width = img.width;
var height = img.height;
var aspectW = width / maxWidth;
var aspectH = height / maxHeight;
if (aspectW > 1 || aspectH > 1) {
if (aspectW > aspectH) {
$img.width(maxWidth);
$img.height(height / aspectW);
}
else {
$img.height(maxHeight);
$img.width(width / aspectH);
}
}
}
Aquí está mi solución de relleno de portada (similar al fondo de pantalla: portada, pero es compatible con el viejo navegador IE)
<div class="imgContainer" style="height:100px; width:500px; overflow:hidden; background-color: black">
<img src="http://dev.isaacsonwebdevelopment.com/sites/development/files/views-slideshow-settings-jquery-cycle-custom-options-message.png" id="imgCat">
</div>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
<script>
$(window).load(function() {
var heightRate =$("#imgCat").height() / $("#imgCat").parent(".imgContainer").height();
var widthRate = $("#imgCat").width() / $("#imgCat").parent(".imgContainer").width();
if (window.console) {
console.log($("#imgCat").height());
console.log(heightRate);
console.log(widthRate);
console.log(heightRate > widthRate);
}
if (heightRate <= widthRate) {
$("#imgCat").height($("#imgCat").parent(".imgContainer").height());
} else {
$("#imgCat").width($("#imgCat").parent(".imgContainer").width());
}
});
</script>
He respondido esta pregunta aquí: ¿Cómo cambiar el tamaño de las imágenes proporcionalmente / mantener la relación de aspecto? . Lo estoy copiando aquí porque realmente creo que es un método muy confiable :)
/**
* Conserve aspect ratio of the orignal region. Useful when shrinking/enlarging
* images to fit into a certain area.
*
* @param {Number} srcWidth Source area width
* @param {Number} srcHeight Source area height
* @param {Number} maxWidth Fittable area maximum available width
* @param {Number} maxHeight Fittable area maximum available height
* @return {Object} { width, heigth }
*
*/
function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
var ratio = [maxWidth / srcWidth, maxHeight / srcHeight ];
ratio = Math.min(ratio[0], ratio[1]);
return { width:srcWidth*ratio, height:srcHeight*ratio };
}