さまざまなサイズの画像にCSSで枠線を重ねて描画する

Question

画像をCSSでクラスタグとして作成したいと考えています。理想的には、各境界線（上端、右端、下端、および左端）が画像の端から-0.75mm（または任意の固定長）だけオフセットされ、画像の内側に枠を作成するためにオーバーラップする例。サイト全体にわたって一貫性のある見た目のフレームを作り出すには、さまざまなサイズと向きの画像で作業する必要があります。どのようにこれを達成するための任意のアイデア？ちょうどCSSを介して行うことは可能ですか？

Image example of effect

Answer 1

あなたは<div>で<img>タグをラップし、境界線を描画するためのdivの::beforeと::after擬似要素を使用することができます。要素のサイズは<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>