Tamaño de la imagen al 50% del tamaño original en HTML

Estoy tratando de cambiar el tamaño de una imagen en HTML, tiene un ancho de 314px y una altura de 212px. Quiero cambiar el tamaño al 50% ...Tamaño de la imagen al 50% del tamaño original en HTML

pero al usar esto, sigo obteniendo una imagen más grande en lugar de una imagen de tamaño medio.

<img src="image.jpg" width="50%" height="50%" />

¿Qué hice mal? Gracias

<html> 
    <head> 
    <title></title> 
    </head>  
    <body> 
     <div> 
     <img src="image4.png" width="50%" height="50%"/> 
     </div> 
    </body> 
</html>

que resuelven el problema anterior usando jQuery a continuación:

$(document).ready(function(e) { 
     var imgs = document.getElementsByTagName('img'); 
     var imgLength = imgs.length; 

     for(var i=0; i<= imgLength-1;i++){ 

      var imgWidth = imgs[i].clientWidth; 
      var imgHeight = imgs[i].clientHeight; 

      $('img').eq(i).attr({width:imgWidth/2, height: imgHeight/2}); 

      console.log(imgWidth); 
     } 

     console.log(imgLength); 

    });

Fuente

2012-06-20 Sam

Usted no hizo nada malo aquí, será cualquier otra cosa que está anulando el tamaño de la imagen.

Puede consultar esta operación fiddle.

Y en this fiddle He alterado el tamaño de la imagen usando %, y está funcionando.

Prueba también utilizando este código:

<img src="image.jpg" style="width: 50%; height: 50%"/>

Here is el ejemplo violín.

Fuente

2012-06-20 10:31:25 Asif

he editado la cuestión con el código que he escrito. – Sam

Bueno, este código debe funcionar ... no hay nada de malo en ello ... – Asif

¿Funciona el vinilo que he proporcionado en la respuesta? ¿Puedes ver la diferencia de tamaño de imagen aquí? También intente con el atributo 'style' dado que – Asif

La configuración de porcentaje no tiene en cuenta el tamaño de la imagen original. De w3schools:

En HTML 4.01, el ancho podría definirse en píxeles o en% del elemento contenedor. En HTML5, el valor debe estar en píxeles.

También, asesoría de buenas prácticas de la misma fuente:

Consejo: Reducción del tamaño de una imagen grande con la altura y atributos de anchura obliga a un usuario para descargar la imagen de gran tamaño (incluso si parece pequeña en el página). Para evitar esto, cambie la escala de la imagen con un programa antes de usarlo en una página.

Fuente

2013-10-01 16:30:05

En cuanto a las buenas prácticas, existen razones legítimas para querer cambiar el tamaño del tamaño del cliente. Anti-aliasing por ejemplo. – iPherian

Podemos hacerlo también por css3. Prueba esto:

.halfsize { 
    -moz-transform:scale(0.5); 
    -webkit-transform:scale(0.5); 
    transform:scale(0.5); 
} 

<img class="halfsize" src="image4.jpg">

sometido a la compatibilidad del navegador

Fuente

2015-12-27 08:22:42

El único problema con este enfoque es que deja espacios en blanco alrededor del elemento. Esto se debe a que la forma en que CSS transforma el trabajo es la siguiente: se representa el elemento, se aplica la transformación, cualquier otro elemento a su alrededor permanece donde estaban. –

Tamaño de la imagen al 50% del tamaño original en HTML

Respuesta

Cuestiones relacionadas