Afficher une image à 50% de sa taille "native"

Question

Je suis en train de mettre un img balise dans un document sans en connaître la largeur/hauteur de l'image correspondante:

<img src="/myimage.png" />

Je veux utiliser les CSS à l'échelle de l'image exactement la moitié de ses "indigènes" taille de la taille de l'image sous-jacente). Je ne peux pas comprendre comment le faire.

• À l'aide de width: 50% serait de taille par rapport au bloc contenant, pas l'image.
• Je ne peux pas la taille d'un pixel en largeur, car je ne connais pas la taille de l'image.

• Depuis que j'ai seulement besoin de soutien WebKit, j'ai essayé à l'aide d'une transformation:

  -webkit-transform: scale(0.5);
  

  Ceci permet de régler l'image bien, mais ne pas redimensionner la taille de l'image de l'élément lui-même.

• @Radagaisus suggère l'utilisation de Javascript, ce qui est une bonne solution de repli. Cependant, c'est sur un ultra léger mobile de la page donc je ne peux pas utiliser jQuery, et traitant de tous les onload() gestionnaires manuellement serait une douleur.

En post-scriptum: pourquoi je fais cela? Parce que j'ai besoin de gérer l'affichage de la Rétine. Je peut le détecter à l'aide de devicePixelRatio , et de remplir les plus grandes (2x) les images, mais j'ai besoin d'une mise à l'échelle vers le bas à 50% à l'air correct sur l'écran.

Answer 1

La propriété zoom sonne comme si il est parfait pour Adam Ernst comme il convient à son périphérique cible. Cependant, pour ceux qui ont besoin d'une solution à cela et ont à prendre en charge autant de dispositifs que possible, vous pouvez effectuer les opérations suivantes:

<img src="..." onload="this.width/=2;this.onload=null;" />

La raison de l' this.onload=null l'addition est pour éviter les anciens navigateurs qui parfois déclencher l'événement load deux fois (ce qui signifie que vous pouvez vous retrouver avec quater de la taille des images). Si vous n'êtes pas inquiet à ce sujet si vous pourriez écrire:

<img src="..." onload="this.width/=2;" />

Ce qui est assez succinct.

Answer 2

C'est un peu bizarre, mais il semble que Webkit, du moins dans la dernière version stable de Chrome, supporte la propriété zoom Microsoft. La bonne nouvelle est que son comportement est plus proche de ce que vous voulez.

Malheureusement, DOM clientWidth et des propriétés similaires renvoient toujours les valeurs d'origine comme si l'image n'avait pas été redimensionnée.

Voir la démonstration en direct sur http://jsbin.com/esucat/edit#html,live

Answer 3

Le code suivant fonctionne pour moi:

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

<img class="half" src="images/myimage.png">
 

Answer 4

Définissez l'image sur l'arrière-plan d'un div, puis définissez la taille de l'arrière-plan sur la moitié de la largeur de l'image.

 <div class="myimage"></div>
 

Puis dans votre css, si votre image est 300px x 200px:

 .myimage {
    background: url('images/myimage.png') no-repeat;
    background-size:150px;
    width:150px;
    height:100px;
}
 

Answer 5

Cela devrait fonctionner:

 img {
    max-width: 50%;
    height: auto;
}