w3docs logo
  1. Snippets
  2. CSS
  3. Comment Ajouter un Cadre autour d'une Image

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>
Trouvez-vous cela utile?