Ridimensiona immagine al 50% della dimensione originale in HTML

Sto provando a ridimensionare un'immagine in HTML, ha larghezza 314px e altezza 212px. Voglio ridimensionarlo al 50% ...Ridimensiona immagine al 50% della dimensione originale in HTML

ma usando questo ho ancora un'immagine più grande invece di un'immagine a mezza dimensione.

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

Cosa ho fatto di sbagliato? Grazie

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

ho risolto il problema di cui sopra utilizzando jQuery di seguito:

$(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); 

    });

fonte

2012-06-20 Sam

non hai fatto niente di sbagliato qui, sarà qualsiasi altra cosa che è prevalente la dimensione dell'immagine.

È possibile controllare questo funzionamento fiddle.

E in this fiddle Ho modificato la dimensione dell'immagine utilizzando % e funziona.

Prova anche utilizzando questo codice:

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

Here is l'esempio violino.

fonte

2012-06-20 10:31:25 Asif

Ho curato la questione con il codice che ho scritto. – Sam

Bene, questo codice deve funzionare ... non c'è niente di sbagliato in esso .. – Asif

Il collegamento di violino che ho fornito in risposta funziona per voi? Riesci a vedere la differenza di dimensione dell'immagine qui? Prova anche con l'attributo 'style' come ho dato – Asif

L'impostazione percentuale non tiene conto della dimensione dell'immagine originale. Da w3schools:

In HTML 4.01, la larghezza può essere definita in pixel o in% dell'elemento contenitore. In HTML5, il valore deve essere in pixel.

Inoltre, suggerimenti su buone pratiche dalla stessa fonte:

Tip: Riduzione un'immagine grande con l'altezza e gli attributi di larghezza costringe a un utente di scaricare l'immagine di grandi dimensioni (anche se sembra piccola sul pagina). Per evitare ciò, ridimensionare l'immagine con un programma prima di usarlo su una pagina.

fonte

2013-10-01 16:30:05

Per quanto riguarda le buone pratiche, ci sono motivi legittimi per volere il ridimensionamento delle dimensioni del client. Anti-aliasing per esempio. – iPherian

Possiamo farlo anche con css3. Prova questo:

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

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

sottoposto a compatibilità del browser

fonte

2015-12-27 08:22:42

L'unico problema con questo approccio è che lascia uno spazio attorno all'elemento. Questo perché il modo in cui le trasformate CSS funzionano è questo: l'elemento viene reso, la trasformazione viene applicata, gli altri elementi attorno a esso rimangono dove erano. –

Ridimensiona immagine al 50% della dimensione originale in HTML

risposta

Problemi correlati