filet - Comment ajouter une bordure à une image en HTML?



entourer une div (7)

Deux façons:

<img src="..." border="1" />

ou

<img style='border:1px solid #000000' src="..." />

Comment puis-je ajouter une bordure à une image en utilisant le HTML?


Answer #1

Jack,

Vous pouvez en apprendre beaucoup sur les frontières, et comment les utiliser à http://www.w3schools.com/css/css_border.asp . Cela étant dit, il existe plusieurs façons d'accomplir cela.

Voici comment je le fais généralement, mais en lisant la documentation sur w3schools vous pouvez venir sur votre propre méthode désirée.

.addBorder {
  /* Thickness, Style, and Color */
  border: 1px solid #000000;
}

<img src="mypicture.jpg" alt="My Picture" class="addBorder" />

Modifier:

J'ai remarqué que la question initiale n'était pas "Comment ajouter une bordure à une image", mais plutôt "comment ajouter dans une boîte autour d'une image en utilisant html?" La question a été réécrite par d'autres, donc je ne suis pas sûr à 100% que vous vouliez une bordure sur votre image.

Si vous vouliez juste une boîte autour de vos images, vous pourriez utiliser un DIV, avec ses propres styles:

.imageBox {
  background-color:#f1f1f1;
  padding:10px;
  border:1px solid #000000;
}

<div class="imageBox">
  <img src="picture.jpg" alt="My Picture" />
</div>

Answer #2

La bonne façon de procéder dépend si vous voulez seulement qu'une image spécifique dans votre contenu ait une bordure ou s'il y a un motif dans votre code où certaines images doivent avoir une bordure. Dans le premier cas, utilisez l'attribut style sur l'élément img, sinon donnez-lui un nom de classe significatif et définissez cette bordure dans votre feuille de style.


Answer #3

Vous pouvez également ajouter un rembourrage pour un bel effet.

<img src="image.png" style="padding:1px;border:thin solid black;">

Answer #4

Les réponses ci-dessus sont très bonnes, j'en suis sûr. Mais pour les esprits faibles, comme moi, je recommande Snagit 10. Vous pouvez donner à une image une bordure de n'importe quelle largeur, style et couleur avant de l'insérer dans votre page Web. Ils font un programme de travail complet sur 30 jours d'essai.


Answer #5

CSS

img{border:2px solid black;}





css