CSS image redimensionner pourcentage de lui-même?

HTML:

<span>
    <img src="example.png"/>
</span>

CSS:

span {
    display: inline-block;
}
img {
    width: 50%;
}

Cela doit être l'une des solutions les plus simples utilisant l'approche de l'élément conteneur.

Lors de l'utilisation de l'élément conteneur approche, cette question est une variante de cette question. L'astuce consiste à laisser l'élément conteneur rétrécirl'image enfant, de sorte qu'elle aura une taille égale à celle de l'image non dimensionnée. Ainsi, lorsque vous définissez la propriété width de l'image en tant que valeur de pourcentage, l'image est mise à l'échelle par rapport à sa l'échelle d'origine.

Certaines des autres propriétés d'activation de shrinkwrapping et valeurs de propriété sont: float: left/right, position: fixed et min/max-width, comme mentionné dans la question liée. Chacun a ses propres effets secondaires, mais display: inline-block serait un choix plus sûr. Matt a mentionné float: left/right dans sa réponse, mais il l'a attribué à tort à overflow: hidden.

Démo sur jsfiddle

Modifier: Comme mentionné par trojan, vous pouvez également profiter de la nouvellement introduite CSS3 module de dimensionnement intrinsèque et extrinsèque :

HTML:

<figure>
    <img src="example.png"/>
</figure>

CSS:

figure {
    width: intrinsic;
}
img {
    width: 50%;
}

Cependant, toutes les versions de navigateur populaires ne le supportent pas au moment de l'écriture.

Essayez zoom propriété

<img src="..." style="zoom: 0.5" />

Edit: apparemment, FireFox ne supporte pas la propriété zoom. Vous devriez utiliser;

-moz-transform: scale(0.5);

Pour FireFox.

Cela est en fait possible, et j'ai découvert comment tout à fait par hasard lors de la conception de mon premier site de conception sensible à grande échelle.

<div class="wrapper">
  <div class="box">
    <img src="/logo.png" alt="">
  </div>
</div>

.wrapper { position:relative; overflow:hidden; }

.box { float:left; } //Note: 'float:right' would work too

.box > img { width:50%; }

Le overflow: hidden donne la hauteur et la largeur du wrapper, malgré le contenu flottant, sans utiliser le hack clearfix. Vous pouvez ensuite positionner votre contenu à l'aide des marges. Vous pouvez même faire du wrapper div un bloc en ligne.

Une autre solution consiste à utiliser:

<img srcset="example.png 2x">

Il ne validera pas car l'attribut src est requis, mais il fonctionne (sauf sur n'importe quelle version D'IE car srcset n'est pas supporté).

Je pense que vous avez raison, ce n'est tout simplement pas possible avec CSS pur pour autant que je sache (pas cross-browser je veux dire).

Modifier:

Ok, je n'ai pas beaucoup aimé ma réponse, alors j'ai un peu perplexe. J'aurais peut-être trouvé une idée intéressante qui pourrait aider.. peut-être que c'est possible après tout (mais pas la chose la plus jolie jamais):

Modifier: Testé et fonctionnant dans Chrome, FF et IE 8 & 9. . Cela ne fonctionne pas dans IE7.

Jsfiddle exemple ici

Html:

<div id="img_wrap">
    <img id="original_img" src="http://upload.wikimedia.org/wikipedia/en/8/81/Mdna-standard-edition-cover.jpg"/>
    <div id="rescaled_img_wrap">
        <img id="rescaled_img" src="http://upload.wikimedia.org/wikipedia/en/8/81/Mdna-standard-edition-cover.jpg"/>
    </div>
</div>

Css:

#img_wrap {
    display: inline-block;       
    position:relative;    
}

#rescaled_img_wrap {
    width: 50%;
}
#original_img {
    display: none;
}
#rescaled_img {
    width: 100%;
    height: 100%;
}

function shrinkImage(idOrClass, className, percentShrinkage){
'use strict';
    $(idOrClass+className).each(function(){
        var shrunkenWidth=this.naturalWidth;
        var shrunkenHeight=this.naturalHeight;
        $(this).height(shrunkenWidth*percentShrinkage);
        $(this).height(shrunkenHeight*percentShrinkage);
    });
};

$(document).ready(function(){
    'use strict';
     shrinkImage(".","anyClass",.5);  //CHANGE THE VALUES HERE ONLY. 
});

Cette solution utilise js et jquery et redimensionne en fonction uniquement des propriétés de l'image et non du parent. Il peut redimensionner une seule image ou un groupe basé en utilisant les paramètres de classe et d'id.

Pour en savoir plus, allez ici: https://gist.github.com/jennyvallon/eca68dc78c3f257c5df5

C'est un très vieux fil mais je l'ai trouvé en cherchant une solution simple pour afficher la capture d'écran retina (haute résolution) sur l'affichage à résolution standard.

Il existe donc une solution HTML uniquement pour les navigateurs modernes:

<img srcset="image.jpg 100w" sizes="50px" src="image.jpg"/>

Cela indique au navigateur que l'image est deux fois la dimension de la taille d'affichage prévue. Les valeurs sont proportionnelles et n'ont pas besoin de refléter la taille réelle de l'image. On peut aussi utiliser 2w 1px pour obtenir le même effet. L'attribut src est utilisé uniquement par les navigateurs hérités.

Le bel effet de celui-ci est qu'il affiche la même taille sur la rétine ou l'écran standard, rétrécissant sur ce dernier.

C'est une approche difficile:

<div>
    <img src="sample.jpg" />
</div>

then in css:
div {
    position: absolute;
}

img, div {
   width: ##%;
   height: ##%;
}