w3docs logo
  1. Snippets
  2. CSS
  3. Wie kann man einen Rahmen um ein Bild herum hinzufügen

Wie kann man einen Rahmen um ein Bild herum hinzufügen

Sie können mit den CSS-Eigenschaften border, padding und background einen einfachen Rahmen um ein Bild herum erstellen. Zuerst muss man das Element <img> in einem Element <div> definieren. Stellen Sie class für Ihr Element div ein und stylen Sie es.

Beispiel
<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>

Wenn Sie einen Kreisrahmen für Ihr Bild erstellen möchten, müssen Sie border-radius auf 50% für alle Seiten Ihres Randes einstellen. Stellen Sie border-color, border-style, border-width nach Ihren Wünschen ein. Vergessen Sie auch nicht, overflow: hidden; einzustellen, um den Rest des Bildes unsichtbar zu machen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>

Sie können verschiedene Ergebnisse haben, wenn Sie die Eigenschaften border-radius und border-color ändern. Wenn Sie z. B. einen Quadratrahmen haben möchten, müssen Sie nur die Werte der Eigenschaft border-radius auf 0 für alle Seiten einstellen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>

Wenn Sie die abgerundeten Ecken für bestimmte Ecken haben möchten, stellen Sie 50px border-radius für die Ecken ein, die Sie abgerundet haben möchten. Ändern Sie in diesem Fall auch width und height entsprechend Ihrer Bildgröße.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>

Wie kann man einen Rahmen zu einem Bild hinzufügen

Es ist auch möglich, ein Bild als Rahmen hinzuzufügen. Zu diesem Zweck gibt es eine CSS-Eigenschaft border-image, um ein Bild als Rahmen um ein Element zu verwenden.

Sie können selbst definieren, wie das Randbild wiederholt wird:

  • stretch: Das Bild wird gedehnt, um den Bereich zu füllen (voreingestellt).
  • repeat: Das Bild wird gedeckt (wiederholt), um den Bereich zu füllen.
  • round: Das Bild wird gedeckt (wiederholt), um den Bereich zu füllen (wenn es den Bereich nicht nicht gänzlich füllt, wird das Bild so skaliert, dass es passt).
  • space: Das Bild wird gedeckt (wiederholt), um den Bereich zu füllen (wenn es den Bereich nicht gänzlich füllt, wird der zusätzliche Raum um die Decke verteilt).

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>Hier ist das Originalbild:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border">
  </body>
</html>

Sehen Sie auch Wie kann man in CSS dem Bild einen Rand hinzufügen.

Finden Sie das nützlich?