Tous les 3 ?: Redimensionnement réactif des images + largeur d'image de l'image réelle pour les petites images + largeur maximale pour toutes les images plus grandes

Le CSS

Ajoutez le code suivant à votrefichier CSS.Cela rendra lesimages évolutivesen fonction de lataille de l'écran.

Changez évidemment labalise de classe si vous souhaitez configurer uniquementpour une classe d'image spécifique

img{ max-width: 100%; }

img{ -ms-interpolation-mode: bicubic; }

Ensuite,vous devezexécuter unfiltrepourempêcher que wordpress ajoute automatiquement des dimensions d'image auximages que vous souhaitez réactives.

   function remove_wp_width_height($string){
  return preg_replace('/\/i', '',$string);
  }
 

Ensuite,lorsque vous avezbesoin d'appeler la vignette dans votremodèle au lieu d'utiliser the_post_thumbnail(); utilisez votrenouvellefonction comme ceci

 echo remove_wp_width_height(get_the_post_thumbnail(get_the_ID(),'large'));
 

The CSS

Add the following code to your CSS file. That will make the images scalable according to screen size.

Obviously change the class tag if you want to set up just for a specific image class

img{ max-width: 100%; }

img{ -ms-interpolation-mode: bicubic; }

Then you need to run a filter to stop wordpress automatically adding image dimensions to the images you want responsive.

  function remove_wp_width_height($string){
  return preg_replace('/\/i', '',$string);
  }

Then when you need to call the thumbnail so in your template instead of using the_post_thumbnail(); use your new function like this

echo remove_wp_width_height(get_the_post_thumbnail(get_the_ID(),'large'));

Àpartir du lien que vous avez donné lespropriétés css s'appliquant à cetteimageest

 #content img{ max-width:690px;}
img { width:100%;height:auto;}
 

C'estpourquoi lesimagespluspetites s'étirent également.mettez àjour votre réponse comme suit:

 img {
max-width: 100%;
height: auto;
width: auto;        /* to make the image responsive */
 }
#content { max-width:690px;}
 

vérifiez ce violon

From the link that you given the css properties applying to that image is

#content img{ max-width:690px;}
img { width:100%;height:auto;}

Thats why it smaller images are also stretching. update your answer as:

img {
max-width: 100%;
height: auto;
width: auto;        /* to make the image responsive */
 }
#content { max-width:690px;}

check this fiddle

Lemoyen leplus simpleest de conserver vos stylestels qu'ils sont actuellement.Limitez simplement votre conteneuren utilisant unpixel ou unpourcentage.

Parexemple: Si vous limitez votretaille à votreimage,votreimage s'étirerajusque làjusque làet pasplus loin.

Si lataille de votreimageest de 200pixels,voyez ci-dessous votreensemble de stylesfinal.

 #content {
    largeurmaximale: 200px;
    largeur: 100%;
}

img {
    largeurmax: 100%;
    hauteur: auto;
    largeur: 100%;/*pour rendre l'image responsive */
}

Voirpourplus de détails - Créer desimages responsives

Merci!
Sumesh M.S

The simplest way is to keep you styles as it is now. Just limit your container using pixel or percentage.

For example: If you limit your to your image size - your image will stretch until there until there and not further.

If you image size is 200px - then, see below for your final style set.

#content {
    max-width: 200px;
    width: 100%;
}

img {
    max-width: 100%;
    height: auto;
    width: 100%;        /* to make the image responsive */
}

See for more details - Making responsive images

Thanks!
Sumesh M.S

Etbien j'ajoutemapièceen disant queje suis un utilisateur débutant de wordpress,et enparticulierpourmonportfolio.J'ai lemêmeproblème d'image responsive,où dans leprototype HTML/CSS lesimages disent que lemorceau deportfolio était comme "1000x650"et il a étémis à l'échelle.Cependant,dans wordpress celan'apasfonctionné.

J'ai donc cherché sur Googleet j'aitrouvé que l'affiche originale de cenuméro fonctionnait pourmoi.

 img {
    max-width: 100%;
    height: auto;
    width: 100%;        /* to make the image responsive */
}
#content img {
    max-width: 690px;
}
 

Well I add my piece by saying that I'm a beginning wordpress user, and for particularly my portfolio. I have the same responsive image issue, where in the HTML/CSS prototype images say like portfolio piece was like "1000x650" and it scaled. However, in wordpress that didn't work.

So I googled and found the original poster of this issue actually worked for me.

img {
    max-width: 100%;
    height: auto;
    width: 100%;        /* to make the image responsive */
}
#content img {
    max-width: 690px;
}