Rendre une image réactive - la méthode la plus simple

Question

Rendre une image réactive - la méthode la plus simple

Demandé el 17 de Mars, 2013: Quand la question a-t-elle été
504378 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je remarque que mon code est réactif, dans la mesure où 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 sont mis à l'échelle en conséquence.

Cependant, la SEULE chose qui ne le fait pas est mon image dans le corps, qui est enveloppée dans des balises de paragraphe... ceci étant dit, existe-t-il un moyen simple de rendre l'image réactive également ?

Voici le code que j'ai utilisé pour que mon image s'affiche 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>

Demandé el 17 de Mars, 2013 par Anonymous

Answer 1

5 Réponses

Answer 2

121voto

Nick Ginanto Points 4779

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 mettre à l'échelle votre image si elle est dans une mise en page fluide.

Pour un affichage réactif (c'est-à-dire que votre mise en page réagit à la taille de la fenêtre), vous pouvez ajouter une classe à l'image et utiliser @media en CSS pour modifier la largeur de l'image.

Notez que si vous modifiez la hauteur de l'image, le rapport sera modifié.

Répondu el 17 de Mars, 2013 par Nick Ginanto (4779 Points )

Answer 3

58voto

user706001 Points 46

Largeur : 100 %, ce qui aura pour effet de casser l'affichage sur un écran plus large.

Voici les règles de Bootstrap img-fluid .

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

Répondu el 29 de Août, 2014 par user706001 (46 Points )

Answer 4

26voto

javidazac Points 1140

Je vous recommande également d'utiliser toutes les propriétés CSS dans un fichier différent du fichier HTML, afin de mieux organiser votre code.

Donc pour rendre votre img réactif, je ferais :

Tout d'abord, nommez votre <img> en utilisant une balise class o id dans votre fichier HTML :

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

Ensuite, dans mon fichier CSS, j'apporterais les modifications nécessaires pour qu'il soit réactif :

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

Répondu el 9 de Décembre, 2013 par javidazac (1140 Points )

Answer 5

7voto

OB7 Points 575

Pour que toutes les images de votre site Web soient réactives, ne modifiez pas votre code HTML en ligne par rapport à un balisage correct, comme le montre le tableau ci-dessous. width:100% ne fonctionne pas dans tous les navigateurs et pose des problèmes dans Firefox. Vous voulez placer vos images sur votre site web comme vous le feriez normalement :

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

Ajoutez ensuite à votre CSS que la largeur maximale de toute image est de 100 % et que la hauteur est réglée sur auto :

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

De cette façon, votre code fonctionne dans tous les navigateurs. Cela fonctionnera également avec les clients CMS personnalisés (par exemple Cushy CMS) qui exigent que la taille réelle de l'image soit codée dans le code HTML en ligne, et c'est en fait plus facile de cette façon lorsque tout ce que vous devez faire pour rendre les images réactives est simplement d'indiquer dans votre fichier CSS que la largeur maximale est de 100 % avec une hauteur définie sur auto. N'oubliez pas height: auto ou vos images ne seront pas mises à l'échelle correctement.

Répondu el 26 de Mai, 2015 par OB7 (575 Points )

Answer 6

6voto

Sumith Harshan Points 1395

J'utilise cette technique pour que le logo reste réactif pour les appareils mobiles de manière simple. Le logo sera redimensionné 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;
}

Répondu el 12 de Décembre, 2014 par Sumith Harshan (1395 Points )

Rendre une image réactive - la méthode la plus simple

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Rendre une image réactive - la méthode la plus simple

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: