Как сверстать внутреннюю рамку с жестко заданным отступом от краев?

Question

[Алексей Николаев]

Доброе утро!
Никак не получается решить одну проблему с версткой - нужно реализовать рамку у изображения, но не снаружи, а внутри (с отступом от границ около 5 пикселов). Это оказалось настолько непростым, что у меня кончились варианты)
Проще всего было бы использовать процентные соотношения (тогда я бы мог разместить внутри блока другой центрированный блок с шириной и высотой 90%), но нужны именно абсолютные отступы. Ширина и высота картинки (а соответственно, и ее родительского блока) может быть любой.
Пока что я пытался решить это созданием контейнера #wrapper с изображением, и еще одного пустого контейнера, который растягивался бы на 100% и имел бы, собственно, рамку. #wrapper предполагалось заставить padding'ом сдвинуть пустой контейнер на заданное абсолютное значение, но это приводило лишь к тому, что пустой контейнер не учитывал padding родителя и растягивался на все 100 процентов (box-sizing тут не помогает).

Остается только костыльный, но более-менее работающий вариант вырезать рамку в png и использовать растягивающийся фон. Но к сожалению, это последнее, что я буду делать, ибо при непропорциональных фону фото будет некрасиво - края рамки должны быть еще закруглены в будущем.

Что должно быть:


Собственно, у меня вопрос: как бы вы пытались решить подобную проблему?.. Спасибо за советы и предположения.

Answer 1

[_ _]

.wrapper {
  float: left;
  position: relative;  
}

.wrapper img {
  z-index: 1;
}

.wrapper .frame {
    position: absolute;
    border: 1px solid white;
    left: 15px; right: 15px;
    top: 15px; bottom: 15px;
}

<div class="wrapper">
  <img src="http://habrastorage.org/getpro/habr/post_images/5d0/2a1/08f/5d02a108f9a6a9d69443537b0bfa728f.jpg" alt="">
  <div class="frame"></div>
</div>

Также можно обойтись двумя элементами - wrapper и img, если использовать :after

Comments

[Алексей Николаев]

Все гениальное действительно просто, не в ту сторону думал, видимо. Спасибо)