Нарисовать перекрывающуюся границу с CSS на изображениях различного размера

Question

Я надеюсь создать границу с моими изображениями через CSS в качестве тега класса. В идеале это выглядело бы как пример, приведенный ниже, где каждая граничная линия (верхняя, правая, нижняя и левая) смещена -0.75 rem (или любая фиксированная длина) от края изображения, перекрываясь, чтобы создать кадр внутри изображения , Ему нужно будет работать с изображениями разных размеров и ориентации, чтобы создать последовательную перспективную рамку по всему сайту. Любые идеи о том, как это сделать? Можно ли сделать это через CSS?

Image example of effect

Answer 1

Вы можете обернуть <img> тег с <div> и использовать ::before и ::after псевдо элементов DIV, чтобы нарисовать границы. Размер элемента <div> будет соответствовать изображению внутри из-за display: inline-block.

.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

Вот рабочий пример:

.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>