web-dev-qa-db-fra.com

Rendre une image sensible - manière la plus simple

Je cherche une solution à ce problème depuis un moment maintenant, sans succès. 

Je remarque que mon code est réactif, car si je le redimensionne à la taille d'un téléphone ou d'une tablette, l'ensemble du texte, des liens et des icônes sociales est redimensionné en conséquence.

Cependant, la seule chose qui ne le soit pas est mon image dans le corps; Cela étant dit, existe-t-il un moyen simple de rendre l’image sensible également?

Je vous remercie! 

Voici le code que j'avais l'habitude de montrer dans le corps de mon image:

</body> 
</center> 
<p><a href="MY WEBSITE LINK" target="_blank"><img src="IMAGE LINK" border="0" alt="Null"></a></p> 
</center>
</body>
htmlcssimagemobile
63
Anonymous

Tu peux 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 redimensionner votre image si vous utilisez une mise en page fluide.

Pour responsive (votre mise en page réagit à la taille de la fenêtre), vous pouvez ajouter une classe à l'image et utiliser des requêtes @media en CSS pour modifier la largeur de l'image.

Notez que changer la hauteur de l’image gâchera le ratio 

99
Nick Ginanto

Largeur: 100% le casseront lorsque vous visualiserez sur un espace plus large.

Ce qui suit est img-responsive de Bootstrap

max-width: 100%; 
display:block; 
height: auto;
38
user706001

Je recommanderais également d'utiliser toutes les propriétés CSS dans un fichier différent de celui du fichier HTML afin que votre code soit mieux organisé.

Donc, pour que votre img soit réactif, ce que je ferais est:

Commencez par nommer votre balise <img> en utilisant un attribut class ou id dans votre fichier HTML:

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

Ensuite, dans mon fichier CSS, je ferais les changements pour le rendre réactif:

.responsive-image {
  height: auto;
  width: 100%;
}
21
javidazac

J'utilise cette technique pour que le logo reste aussi réactif que possible pour les appareils mobiles. Le logo sera automatiquement redimensionné.

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 serait une aide.

Merci

4
Sumith Harshan

Pour que toutes les images de votre site Web soient réactives, ne modifiez pas votre code HTML inséré dans le bon balisage, car width: 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 comme vous devriez normalement:

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

ajoutez ensuite à votre css que toute largeur d'image maximale est de 100% avec la hauteur définie sur auto:

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

De cette façon, votre code fonctionne dans tous les navigateurs. Il fonctionnera également avec les clients CMS personnalisés (par exemple, Cushy CMS) qui exigent que les images soient codées en taille réelle dans le code HTML incorporé. Il est en fait plus facile lorsque tout ce que vous devez faire pour rendre les images réactives est simplement indiqué dans votre CSS fichier dont la largeur maximale est de 100% avec height réglé sur auto. N'oubliez pas la hauteur: l'auto ou vos images ne seront pas correctement redimensionnées.

4
OB7

Je l'utilise tout le temps

Vous pouvez personnaliser les propriétés img class et max-width.

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

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

4
Abhishek Goel

Deux ans plus tard que prévu, mais .. es-tu obligé d'utiliser une balise <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 la fin tout être tout à des images sensibles, mais c'est un début. Essayez également de manipuler 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
Beck

définissez la hauteur ou la largeur de l’image sur 100%.

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

2
btevfik

Pour rendre une image sensible, utilisez 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
JacobG182

Les images doivent être définies comme ceci

img { max-width: 100%; }
1
pixel 67

utilisez bootstrap pour que vos images soient libres de toute hâte. utilisez la classe img-responsive et vous avez terminé

<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">
0
Goodlife

au lieu d’ajouter css pour rendre l’image plus réactive, ajoutez différentes images de résolution 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 haute résolution que les navigateurs de bureau. 

En utilisant SASS, il est facile d’utiliser différentes versions de l’image pour différentes résolutions en utilisant la requête multimédia.

0
Gajendra Jena