css: граница на изображении, а не за его пределами

Question

Когда вы применяете границу: 5px solid # 000;на изображении граница появляется вокруг / снаружи изображения.Есть ли способ разместить границу «на» изображении, чтобы она маскировала 5 внешних пикселей изображения?

Answer 1

Как уже было сказано, оберните изображение в контейнер div. Но контейнер div должен быть меньше изображения, а ширина, высота, позиции и толщина согласованы.

Вроде так:

<style>
    #ImgBorder {
        width:      440px;  /*Set to picture  width minus 2 times border thickness.*/
        height:     327px;  /*Set to picture height minus 2 times border thickness.*/
        margin:     0;
        padding:    0;
        border:     5px solid #000;
        overflow:   hidden
    }
    #ImgBorder img {
        width:      450px;  /*Set to picture width.*/
        height:     337px;  /*Set to picture height.*/
        margin:     0;
        padding:    0;
        border:     none;
        position:   relative;
        top:        -5px;   /*Adjust by border thickness.*/
        left:       -5px;   /*Adjust by border thickness.*/
    }
</style>

<div id="ImgBorder">
    <img src="http://bioweb.uwlax.edu/bio203/s2008/kwong_hoi/images/Adorable-Cats-Screensaver.jpg">
</div>

---

Обновление: решение jQuery:

Вы можете увидеть его в действии на jsFiddle.

<script type="text/javascript">
    $(window).load (jQueryMain);

    function jQueryMain () {
        var BorderWidthPx   = 5;

        //--- Put frame div around marked
        $("img.FrameMe").wrap ('<div class="FrameMe">');

        $("img.FrameMe").each ( function () {
            //--- Adjust dimensions of Frame.
            $(this).parent ()[0].style.width    = ($(this).outerWidth  (true) - 2*BorderWidthPx) + 'px';
            $(this).parent ()[0].style.height   = ($(this).outerHeight (true) - 2*BorderWidthPx) + 'px';

            //--- Set positioning
            $(this).css ( {
                'top': -1*BorderWidthPx + 'px', 'left': -1*BorderWidthPx + 'px', 'position': 'relative'
            } );
        } );
    }
</script>
<style>
    div.FrameMe {
        margin:     0;
        padding:    0;
        border:     5px solid #000;
        overflow:   hidden
    }
    img.FrameMe {
        /* Will set dimensions and positioning with jQuery. */
        margin:     0;
        padding:    0;
        border:     none;
    }
</style>

<img class="FrameMe" src="http://i.stack.imgur.com/aAAeG.jpg">

Answer 2

Может быть, что-то в этом духе (только стороны, а не верх, но вы понимаете)

Answer 3

Существует еще одна опция, которая добавляет внутренний div в контейнер изображений:

<div class='img-container'>
  <img src="img/img.png" />
  <div class='img-border'></div>
</div>

<style>
  .img-container {
    position: relative;
  }

  .img-border {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;

    border: 6px solid red;
  }