Comment définir la largeur de l'image 1/2 de la valeur par défaut sans utiliser javascript

Question

Je vais montrer l'image 0,5 fois plus petit que la normale. code normal

<img src = "./bk.jpg"/> 

Essayé celui

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

Mais cette largeur est parent <div> de 50% non 50% de la largeur par défaut. je peux le faire en javascript comme ci-dessous

img = getElementById(); 
img.onload = function(){ 
img.width /= 2; 
... 
} 

Mais je pense que cela peut être fait uniquement à l'aide css.
S'il vous plaît n'importe quel type d'aide!

Answer 1

Je pense que ceci est la partie de css que vous avez besoin

img { 
-webkit-transform: scale(0.5); /* Saf3.1+, Chrome */ 
-moz-transform: scale(0.5); /* FF3.5+ */ 
    -ms-transform: scale(0.5); /* IE9 */ 
    -o-transform: scale(0.5); /* Opera 10.5+ */ 
     transform: scale(0.5); 
}​ 

Answer 2

Vous pouvez le faire en utilisant la propriété à l'échelle css

.half{ 
 
    -ms-transform: scale(0.5); 
 
    -webkit-transform: scale(0.5); 
 
    transform:scale(0.5); 
 
}

<img src = "http://lorempixel.com/200/200/"/> 
 
<img src = "http://lorempixel.com/200/200/" class="half"/>