web-dev-qa-db-fra.com

Image redimensionnée à 50% de la taille originale en HTML

J'essaie de redimensionner une image en HTML, elle a une largeur de 314 pixels et une hauteur de 212 pixels. Je veux le redimensionner à 50% ...

mais en utilisant cela, je reçois toujours une image plus grande au lieu d’une image demi-taille.

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

Qu'ai-je fait de mal? Merci

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

J'ai résolu le problème ci-dessus en utilisant jquery ci-dessous:

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

    });
jqueryhtmlimage
49
Sam

Vous n’avez rien fait de mal ici, cela aura une incidence sur la taille de l’image.

Vous pouvez vérifier que cela fonctionne violon .

Et dans ce violon J'ai modifié la taille de l'image en utilisant %, et cela fonctionne.

Essayez aussi d'utiliser ce code:

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

Voici l'exemple de violon.

71
Asif

Le réglage en pourcentage ne prend pas en compte la taille de l'image d'origine. De w3schools :

En HTML 4.01, la largeur pourrait être définie en pixels ou en% de l'élément conteneur. En HTML5, la valeur doit être en pixels.

En outre, des conseils de bonne pratique provenant de la même source:

Conseil: la réduction d'une grande image avec les attributs height et width oblige l'utilisateur à télécharger la grande image (même si elle a l'air petite sur la page). Pour éviter cela, redimensionnez l'image avec un programme avant de l'utiliser sur une page.

9
Skippy le Grand Gourou

Nous pouvons le faire par css3 aussi. Essaye ça:

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

<img class="halfsize" src="image4.jpg">
  • soumis à la compatibilité du navigateur
7
Nalan Madheswaran