web-dev-qa-db-fra.com

Image CSS redimensionner en pourcentage?

J'essaie de redimensionner un img avec un pourcentage de lui-même. Par exemple, je veux juste réduire l'image de moitié en la redimensionnant à 50%. Mais appliquer width: 50%; redimensionnera l'image pour qu'elle soit égale à 50% de l'élément conteneur (l'élément parent qui est peut-être l'élément <body> par exemple).

La question est, puis-je redimensionner l'image avec un pourcentage d'elle-même sans utiliser javascript ou côté serveur? (Je n'ai aucune information directe sur la taille de l'image)

Je suis presque sûr que vous ne pouvez pas faire cela, mais je veux juste voir s'il existe une solution intelligente avec CSS uniquement. Merci!

htmlcssimage
92
Min Ming Lo

J'ai 2 méthodes pour vous.

Méthode 1. démo sur jsFiddle

Cette méthode redimensionne uniquement l’image, pas les dimensions réelles dans le DOM, et l’état visuel après le redimensionnement, centré au milieu de la taille originale.

html: 

<img class="fake" src="example.png" />

css: 

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);
             /* IE6–IE9 */
             filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
}​

Note de support du navigateur: Les statistiques des navigateurs s'affichent en ligne dans css.

Méthode 2. démo sur jsFiddle

html: 

<div id="wrap">
    <img class="fake" src="example.png" />
    <div id="img_wrap">
        <img class="normal" src="example.png" />
    </div>
</div>​

css: 

#wrap {
    overflow: hidden;
    position: relative;
    float: left;
}

#wrap img.fake {
    float: left;
    visibility: hidden;
    width: auto;
}

#img_wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#img_wrap img.normal {
    width: 50%;
}​

Remarque:img.normal et img.fake est la même image.
Remarque pour le support du navigateur: Cette méthode fonctionnera dans tous les navigateurs, car tous les navigateurs prennent en charge css propriétés utilisées dans la méthode.

La méthode fonctionne de cette façon:

  1. #wrap et #wrap img.fake avoir un flux
  2. #wrap a overflow: hidden pour que ses dimensions soient identiques à celles de l’image interne (img.fake)
  3. img.fake est le seul élément à l'intérieur de #wrap sans absolute se positionnant de manière à ne pas rompre la deuxième étape
  4. #img_wrap a absolute un positionnement à l'intérieur de #wrap et s'étend en taille à l’ensemble de l’élément (#wrap)
  5. Le résultat de la quatrième étape est que #img_wrap a les mêmes dimensions que l'image.
  6. En mettant width: 50% sur img.normal, sa taille est 50% de #img_wrap, et donc 50% de la taille de l'image d'origine.
98
Vladimir Starkov

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 des éléments de conteneur.

En utilisant l'approche conteneur, cette question est une variante de cette question . L'astuce consiste à laisser l'élément conteneur réduire la taille de l'image enfant afin qu'elle ait une taille égale à celle de l'image non redimensionnée. Ainsi, lorsque vous définissez la propriété width de l'image sous forme de pourcentage, l'image est mise à l'échelle par rapport à son échelle d'origine.

Parmi les autres propriétés et valeurs de propriété activant la rétraction 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’attribue à tort à overflow: hidden.

Démo sur jsfiddle

Modifier: Comme mentionné par trojan , vous pouvez également tirer parti de la nouvelle version CSS3, dimensionnement intrinsèque et extrinsèque module :

HTML:

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

CSS:

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

Cependant, toutes les versions de navigateur populaires ne la prennent pas en charge au moment de la rédaction .

37
user3829636

Essayez la propriété zoom

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

Edit: Apparemment, FireFox ne supporte pas la propriété zoom. Tu devrais utiliser;

-moz-transform: scale(0.5);

pour FireFox.

10
Emir Akaydın

Une autre solution consiste à utiliser:

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

Il ne sera pas validé car l'attribut src est requis, mais cela fonctionne (sauf sur les versions de IE car srcset n'est pas pris en charge).

4
benface

C’est en fait possible et j’ai découvert comment 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 débordement: hidden donne à l'enveloppe la hauteur et la largeur, malgré le contenu flottant, sans utiliser le hack clearfix. Vous pouvez ensuite positionner votre contenu en utilisant des marges. Vous pouvez même faire de la wrapper div un inline-block.

2
Matt

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

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

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

Cela indique au navigateur que l'image est deux fois plus grande que la taille d'affichage souhaitée. 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 n'est utilisé que par les anciens navigateurs.

L’effet de Nice est qu’il affiche la même taille sur la rétine ou sur l’affichage standard, rétrécissant sur ce dernier.

2
Max_B

En fait, la plupart des réponses ne modifient pas vraiment l'image à la largeur de lui-même.

Nous avons besoin d'avoir une largeur et une hauteur de auto sur l'élément img lui-même pour pouvoir commencer avec sa taille originale.

Après cela, un élément conteneur peut redimensionner l'image pour nous.

Exemple HTML simple:

<figure>
    <img src="[email protected]" />
</figure>

Et voici les règles CSS. J'utilise un conteneur absolu dans ce cas:

figure {
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transform: scale(0.5); 
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5); 
    -o-transform: scale(0.5);
    transform: scale(0.5);
    transform-Origin: left;
} 

figure img {
    width: auto;
    height: auto;
}

Vous pouvez modifier le positionnement de l'image avec des règles comme transform: translate(0%, -50%);.

0
Floris
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 uniquement en fonction des propriétés de l'image et non du parent. Il peut redimensionner une seule image ou un groupe en utilisant les paramètres class et id.

pour plus, allez ici: https://Gist.github.com/jennyvallon/eca68dc78c3f257c5df5

0
Jenny Vallon

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

Modifier:

Ok, ma réponse ne me plaisait pas beaucoup, alors je suis un peu perplexe. J'aurais peut-être trouvé une idée intéressante qui pourrait aider .. peut-être est-ce IS possible après tout (bien que ce ne soit pas la plus jolie chose qui soit)):

Edit: Testé et fonctionnant sous Chrome, FF et IE 8 & 9.. Il ne fonctionne pas dans IE7.

exemple jsFiddle 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%;
}
0
Wesley

C'est une approche pas difficile:

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

then in css:
div {
    position: absolute;
}

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