Wewnętrzna granica ponad obrazami z CSS?

Question

Chciałbym dodać białą ramkę nad wszystkimi moimi obrazami w moim div zawartości za pomocą css. Nie powinno to wpłynąć na obrazy w obszarach div nagłówka i stopki. jak to osiągnąć? Zobacz przykładowy obraz poniżej. Na stronach internetowych znajdują się obrazy o różnych rozmiarach.

Zobacz obraz:

Answer 1

Można to zrobić bez konieczności dodatkowego elementu lub pseudo element:

http://cssdeck.com/labs/t6nd0h9p

img { 
    outline: 1px solid white; 
    outline-offset: -4px; 
} 

IE9 & 10 nie obsługują własność outline-offset, ale poza tym wsparcie jest dobre: ​​http://caniuse.com/#search=outline

Alternatywne rozwiązanie, które nie wymaga znajomości wymiarów obrazka:

http://cssdeck.com/labs/aajakwnl

<div class="ie-container"><img src="http://placekitten.com/200/200" /></div> 

div.ie-container { 
    display: inline-block; 
    position: relative; 
} 

div.ie-container:before { 
    display: block; 
    content: ''; 
    position: absolute; 
    top: 4px; 
    right: 4px; 
    bottom: 4px; 
    left: 4px; 
    border: 1px solid white; 
} 

img { 
    vertical-align: middle; /* optional */ 
} 

Answer 2

Cokolwiek identyfikator div class jest lub może po prostu dodać

#yourDivIDExample { 
... 
} 

#yourDivIDExample img{ 
border:1px solid #ffffff; 
} 

Spowoduje to utworzenie obramowanie wokół obrazów w samej div .. to samo działa dla klas lub reguły globalnej również ..

img { 
border:1px solid #ffffff; 
} 

Answer 3

można spróbować to:

HTML:

<div class="image"> 
    <div class="innerdiv"> 

    </div> 
</div> 

CSS:

.image 
{ 
    width: 325px; 
    height: 239px; 
    background:url(http://www.modernvice.com/files/images/backgrounds/_Zoom/black-pony.jpg) 0 0 no-repeat; 
    padding: 10px; 
} 

.innerdiv 
{ 
    border: 1px solid white; 
    height:100%; 
    width: 100%; 
} 

jsFiddle

nadzieję, że to, co masz na myśli :)

Answer 4

Można zrobić coś takiego DEMO

html

<div class="imgborder"> 
    <div class="in-imgborder"> 

    </div> 
</div> 

CSS

.imgborder { 
    width: 300px; 
    height: 300px; 
    position: relative; 
    background: url(http://placekitten.com/300/300) no-repeat; 
} 
.in-imgborder { 
    width: 290px; 
    height: 290px; 
    position: absolute; 
    top: 4px; 
    left: 4px; 
    border: 1px solid red; 
} 

Answer 5

Rozwiązałem to za pomocą box-shadow: inset i works with IE11 and up. Chciałem obramowanie w rogach wokół obrazu, ale te przykłady mają wstawkę graniczną 10px. Wymaga ona elementu nadrzędnego o numerze z elementem :before lub go, ale obsługuje go bardzo dobrze.

.image { 
    width: 100%; 
    height: auto; 
} 

.image__wrapper { 
    position: relative; 
} 

.image__wrapper:before { 
    content: ''; 
    position: absolute; 
    top: 10px; 
    bottom: 10px; 
    left: 10px; 
    right: 10px; 
    box-shadow: inset 0 0 0 3px red; 
} 

CodePen Demo