Faire une image responsive-la manière la plus simple [dupliquer]

cette question a déjà une réponse ici:

Cela fait longtemps que je cherche une solution, sans succès.

je remarque que mon code est responsive, dans le fait que si je le réduis à la taille d'un téléphone ou d'une tablette - tout le texte, les liens, et les icônes sociales échelle en conséquence.

cependant, la seule chose qui ne fait pas est mon image dans le corps; qui est enveloppée dans des étiquettes de paragraphe.. cela étant dit, existe-t-il un moyen simple de rendre l'image aussi réactive?

Merci!

voici le code que j'utilisais pour montrer mon image dans le corps:

</body> 
</center> 
<p><a href="MY WEBSITE LINK" target="_blank"><img src="IMAGE LINK" border="0" alt="Null"></a></p> 
</center>
</body>
63
demandé sur Anonymous 2013-03-17 11:51:25

12 réponses

Vous pouvez essayer de faire

<p>
  <a href="MY WEBSITE LINK" target="_blank">
    <img src="IMAGE LINK" style='width:100%;' border="0" alt="Null">
  </a>
</p>

cela devrait changer l'échelle de votre image si dans une disposition fluide.

pour responsive (ce qui signifie que votre mise en page réagit à la taille de la fenêtre), vous pouvez ajouter une classe à l'image et utiliser @media requêtes dans css pour changer la largeur de l'image.

noter que changer la hauteur de l'image va salir le rapport

98
répondu Nick Ginanto 2014-04-25 10:34:52

Width: 100% cassera lorsque vous affichez sur un plus grand sont.

ci-dessous est Bootstrap img-responsive

max-width: 100%; 
display:block; 
height: auto;
35
répondu user706001 2014-08-29 07:59:09

je recommande également d'utiliser toutes les propriétés CSS dans un fichier différent que le fichier HTML, de sorte que vous pouvez avoir votre code mieux organisé.

donc pour rendre votre img responsive ce que je ferais est:

D'abord, nommez votre <img> en utilisant un attribut class ou id dans votre fichier HTML:

<img src="IMAGE LINK" border="0" class="responsive-image" alt="Null">

puis, dans mon fichier CSS, j'apporterai les modifications pour le rendre réactif:

.responsive-image {
  height: auto;
  width: 100%;
}
21
répondu javidazac 2016-02-06 10:12:50

j'utilise cette technique pour garder le logo aussi responsive pour les appareils mobiles que simple.Le Logo se redimensionnera automatiquement.

HTML

<div id="logo_wrapper">
  <a href="http://example.com" target="_blank">
    <img src="http://example.com/image.jpg" border="0" alt="logo" />
  </a>
</div>

CSS

#logo_wrapper img {
  max-width: 100%;
  height: auto;
}

J'espère que ce sera utile.

Merci

4
répondu Sumith Harshan 2014-12-12 06:57:25

pour rendre toutes les images sur votre site responsive, ne changez pas votre HTML en ligne à partir de markup correct, comme la largeur:100% ne fonctionne pas dans tous les navigateurs, et provoque des problèmes dans Firefox. Ce que vous voulez faire est de placer vos images sur votre site Web comment vous devriez normalement:

<img src="image.jpg" width="1200px" height="600px" />

et ensuite ajouter à votre css que n'importe quelle image max-width est 100% avec la hauteur fixée à auto:

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

de cette façon votre code fonctionne dans tous les navigateurs. Cela fonctionnera aussi avec les clients CMS personnalisés (CMS Cushy) qui nécessitent des images pour avoir la taille réelle de l'image codée dans le HTML en ligne, et il est en fait plus facile de cette façon lorsque tout ce que vous devez faire pour rendre les images responsive est simplement l'état dans votre fichier css que la largeur maximale est de 100% avec hauteur fixée à auto. N'oubliez pas la hauteur: auto ou vos images ne se dimensionneront pas correctement.

4
répondu OB7 2015-05-26 19:00:18

Je l'utilise tout le temps

vous pouvez personnaliser la classe img et la propriété max-width.

img{
    width: 100%;
    max-width: 800px;
}

max-width est imp sinon votre image sera trop dimensionnée pour le bureau. Pas besoin de mettre la propriété height parce que par défaut c'est le mode auto.

4
répondu Abhishek Goel 2016-04-19 08:00:03

hauteur ou la largeur de l'image à être de 100%.

plus ici. Comment puis-je redimensionner une image pour s'adapter à un conteneur div

2
répondu btevfik 2017-05-23 10:31:12

pour rendre une image responsive utiliser ce qui suit:

CSS

.responsive-image {
        width: 950px;//Any width you want to set the image to.
        max-width: 100%;
        height: auto;
}

HTML

<img class="responsive-image" src="IMAGE URL">
2
répondu JacobG182 2015-03-31 13:39:12

deux ans de retard à ce poste mais.. êtes-vous contraint d'utiliser une étiquette <img> ?

j'ai trouvé beaucoup plus facile de définir un <div> ou tout autre élément de votre choix avec un background-image , width: 100% et background-size: 100% .

ce n'est pas le end all be all pour les images responsive, mais c'est un début. Aussi, essayez de jouer avec background-size: cover et peut-être un peu de positionnement avec background-position: center .

CSS:

.image-container{
  height: 100%; // doesn't have to be '%' can also use 'px'
  width: 100%;
  margin: 0 auto;
  padding: 0;

  background-image: url(../img/exampleImage.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100%;

}

HMTL:

<div class="image-container"></div>
2
répondu Beck 2015-08-08 20:26:37

les Images doivent être positionnées comme ceci

img { max-width: 100%; }
1
répondu pixel 67 2014-10-10 12:52:58

utilisez bootstrap pour avoir une agitation libre avec vos images comme le montre la utilisez la classe img-responsive et vous avez terminé

<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236"> 
0
répondu Goodlife 2015-08-06 21:10:20

au lieu d'ajouter css pour rendre l'image réactive, en ajoutant des images de résolution différentes W. R. T. une résolution d'écran différente rendrait l'application plus efficace.

les navigateurs mobiles n'ont pas besoin d'avoir la même image de haute résolution que les navigateurs de bureau ont besoin.

en utilisant SASS il est facile d'utiliser différentes versions de l'image pour une résolution différente en utilisant la requête de médias.

0
répondu Gajendra Jena 2016-03-24 09:51:24