Comment Ajouter un Cadre autour d'une Image

En construisant des pages Web, on veut parfois ajouter un cadre à une image d'une page sans utiliser Photoshop ou quelque d'autre éditeur. CSS peut nous aider à faire face à ce problème en ajoutant des cadres colorés avec n'importe quelle largeur et style à l'image.

Vous pouvez créer un cadre simple autour d'une image en utilisant les propriétés CSS border, padding et background .

Créez HTML

  • Premièrement, créez un élément <div> avec un nom de classe "frame".
  • Définissez l'élément <img> dans un élément <div>.
  • Définissez l'attribut alt pour l'image.
<div class="frame">
  <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature">
</div>

Créez CSS

  • Définissez la hauteur et la largeur pour le cadre.
  • Spécifiez le style, la largeur et la couleur de la bordure avec la propriété raccourcie border.
  • Définissez une couleur du fond.
  • Définissez margin à "auto" et padding avec deux valeurs. La première valeur définit les côtés supérieur et inférieur et la deuxième définit les côtés droit et gauche.
  • Spécifiez la largeur et la hauteur de l'image à 100%.
.frame {
  width: 450px;
  height: 350px;
  border: 3px solid #ccc;
  background: #eee;
  margin: auto;
  padding: 15px 25px;
}
img {
  width: 100%;
  height: 100%;
}

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .frame {
        width: 450px;
        height: 350px;
        border: 3px solid #ccc;
        background: #eee;
        margin: auto;
        padding: 15px 25px;
      }
      img {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="frame">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature" />
    </div>
  </body>
</html>

Si vous voulez créer bordure de cadre de cercle pour votre image, vous devez définir border-radius 50% pour tous les côtés de votre bordures. Définissez border-color, border-style, border-width selon vos besoins. N'oubliez pas de définir overflow: hidden; pour que l'autre part de l'image soit invisible.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .circle {
        border-color: #666 #1c87c9;
        border-image: none;
        border-radius: 50% 50% 50% 50%;
        border-style: solid;
        border-width: 25px;
        height: 200px;
        width: 200px;
        overflow: hidden;
      }
      img {
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="circle">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature" />
    </div>
  </body>
</html>

Vous pouvez avoir des différentes données de sortie en changeant les propriétés border-radius et border-color. Par exemple, si vous voulez avoir square frame, vous devez définir border-radius 0 pour tous les côtés.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .square {
        height: 200px;
        width: 200px;
        border-color: #666 #1c87c9;
        border-image: none;
        border-radius: 0 0 0 0;
        border-style: solid;
        border-width: 30px;
      }
      img {
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="square">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature" />
    </div>
  </body>
</html>

Si vous voulez avoir les coins arrondis pour les coins spécifiques, définissez 50px border-radius pour les coins que vous voulez faire arrondis. Dans ce cas, changez également width et height en fonction de la taille de votre image.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .rounded-borders {
        height: 200px;
        width: 300px;
        border-color: #666 #8ebf42;
        border-image: none;
        border-radius: 50px 0 50px 0;
        border-style: solid;
        border-width: 20px;
      }
      img {
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="rounded-borders">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature" />
    </div>
  </body>
</html>

Comment Ajouter un Cadre d'Image à une Image

C'est également possible d'ajouter une image comme un bordure. Pour ce but, il y a un propriété CSS border-image qui vous permet à spécifier une image à eyte utilisé autour d'un élément.

Vous pouvez définir comment répéter le cadre d'image de façons suivants :

  • stretch - l'image est étirée pour remplir la zone (this is a default value)
  • repeat - l'image est répétée pour remplir la zone
  • round - l'image est répétée pour replir la zone (si elle ne remplit pas la zone avec un nombre entière des carreaux, alors l'image est rédimensionnée pour qu'elle rentre).
  • space - l'image est répétée pour remplir la zone (si elle ne remplit pas la zone avec un nombre entière des carreaux, la zone supplémentaire est distribué autour des carreaux).

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
        width: 80%;
        height: 300px;
        margin-bottom: 20px;
        background: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg") no-repeat;
        background-size: cover;
      }
      img {
        width: 30%;
        height: 30%;
      }
      .border-one {
        border: 20px solid transparent;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") 50 round;
      }
      .border-two {
        border: 20px solid transparent;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") 35% round;
      }
      .border-three {
        border: 20px solid transparent;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") 100% round;
      }
      .border-four {
        border: 20px solid transparent;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") 20 stretch;
      }
    </style>
  </head>
  <body>
    <div class="border-one"></div>
    <div class="border-two"></div>
    <div class="border-three"></div>
    <div class="border-four"></div>
    <hr />
    <p>Voici l'image originelle:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border" />
  </body>
</html>