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.