Zeichne einen überlappenden Rahmen mit CSS auf unterschiedlich große Bilder

Question

Ich hoffe, dass ich einen Rahmen für meine Bilder durch CSS als Klassen-Tag erstellen kann. Idealerweise würde es wie im folgenden Beispiel aussehen, bei dem jede Umrandungslinie (oben, rechts, unten und links) vom Rand des Bildes um -0,75 rem (oder eine beliebige feste Länge) versetzt ist, um einen Rahmen innerhalb des Bildes zu erzeugen . Es müsste an Bildern unterschiedlicher Größe und Ausrichtung arbeiten, um einen konsistent aussehenden Rahmen über die Website zu erzeugen. Irgendwelche Ideen, wie man das erreicht? Ist es möglich, nur durch CSS durchzukommen?

Image example of effect

Answer 1

Sie können die <img>-Tag mit einem <div> wickeln, und verwenden Sie die von div ::before und ::after Pseudo-Elemente, die Grenzen zu ziehen. Die <div> Elementgröße passt sich aufgrund display: inline-block an das Bild darin an.

.imageFrame { 
 
    display: inline-block; 
 
    position: relative; 
 
    font-size: 0; /** required to remove white space **/ 
 
} 
 

 
.imageFrame::before, .imageFrame::after { 
 
    position: absolute; 
 
    border-style: solid; 
 
    border-color: yellow; 
 
    content: ''; 
 
} 
 

 
.imageFrame::before { 
 
    top: 5px; 
 
    right: 0; 
 
    bottom: 5px; 
 
    left: 0; 
 
    border-width: 2px 0 2px 0; 
 
} 
 

 
.imageFrame::after { 
 
    top: 0; 
 
    right: 5px; 
 
    bottom: 0; 
 
    left: 5px; 
 
    border-width: 0 2px 0 2px; 
 
} 
 

 
.smaller { 
 
    width: 300px; 
 
    height: 200px; 
 
}

<div class="imageFrame"> 
 
    <img src="https://pbs.twimg.com/profile_images/625769159339737088/2dwpQAXA.jpg"> 
 
</div> 
 

 
<div class="imageFrame"> 
 
    <img src="https://s-media-cache-ak0.pinimg.com/236x/6f/7a/bb/6f7abbd4d03bf30068cdec219a29a1a9.jpg"> 
 
</div> 
 

 
<div class="imageFrame"> 
 
    <img class="smaller" src="https://www.petfinder.com/wp-content/uploads/2013/09/cat-black-superstitious-fcs-cat-myths-162286659.jpg"> 
 
</div>

Answer 2

Hier funktioniert Beispiel:

.container{ 
 
    width:200px; 
 
    height:160px; 
 
    background-image:url('http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg'); 
 
    bacground-size:cover; 
 
    box-sizing:border-box; 
 
    padding:10px; 
 
} 
 
.innerOne{ 
 
    width:100%; 
 
    height:100%; 
 
    border:1px solid white; 
 
}

<div class="container"> 
 
    <div class="innerOne"> 
 
    </div> 
 
</div>