web-dev-qa-db-fra.com

Bordure intérieure sur les images avec CSS?

Je voudrais ajouter une bordure blanche sur toutes mes images dans mon contenu div en utilisant CSS. Les images des zones div de l'en-tête et du pied de page ne doivent pas être affectées. Comment puis-je y arriver? Voir l'exemple d'image ci-dessous. Il y a des images de différentes tailles sur les pages Web. 

Voir image:

Image with inner border

cssimageborder
31
user2369812

Vous pouvez le faire sans avoir d’élément supplémentaire ni de pseudo élément:

http://cssdeck.com/labs/t6nd0h9p

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

IE9 et 10 ne supportent pas la propriété outline-offset, mais sinon, le support est bon: http://caniuse.com/#search=outline

Solution alternative qui ne nécessite pas de connaître les dimensions de l’image:

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 */
}
68
cimmanon

Vous pouvez essayer ceci:

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

J'espère que c'est ce que tu voulais dire :)

1
nkmol

Quel que soit le div ID ou la classe, vous pouvez simplement ajouter

#yourDivIDExample {
...
}

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

Cela créera une bordure autour des images dans la div elle-même. Même travail pour les classes ou règle globale aussi 

img {
border:1px solid #ffffff;
}
0
Pogrindis

J'ai résolu ceci avec box-shadow: inset et cela fonctionne avec IE11 et supérieur . Je voulais une bordure dans les coins autour de l'image mais ces exemples ont la bordure 10px insère. Il nécessite un parent div avec l'élément :before ou :after mais le gère très bien. 

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

Démo CodePen

0
Calsal

Vous pouvez faire quelque chose comme ceci 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;
}
0
Vikas Ghodke