Смещение границы над изображением

Я пытаюсь создать точно так же, как показано на рисунке ниже. Я пробовал другие методы, используя метод outline и offset, но я не мог понять, как это сделать.

Здесь JSFiddle:

img {
  border: 4px solid green;
}

<img src="https://image.ibb.co/cxwWPa/services_gas_oil.jpg" alt="services_gas_oil" border="0">

Ответы

Ответ 1

Оберните изображение встроенным блоком и установите абсолютно позиционированный псевдоэлемент в качестве границы:

body {
  padding: 50px 0 0 80px;
}

.imageContainer {
  display: inline-block;
  position: relative;
}

.imageContainer::before {
  position: absolute;
  top: -5%;
  left: -15%;
  width: 100%;
  height: 100%;
  border: 4px solid #77B244;
  content: '';
}

<div class="imageContainer">
  <img src="https://cdn.pixabay.com/photo/2013/07/31/12/25/cat-169095_960_720.jpg" alt="services_gas_oil" border="0">
</div>

Ответ 2

Проще было бы использовать комбинацию границы, контура и отрицательного outline-offset. Вот пример:

img{
  outline:4px solid #77B244;
  outline-offset:-100px;
  border:50px solid transparent;
  border-width:150px 50px 50px 150px;
  margin:-75px 0 0 -75px;
}

<img src="https://image.ibb.co/cxwWPa/services_gas_oil.jpg" alt="services_gas_oil" border="0">

Ответ 3

Другая возможность - обернуть изображение внутри элемента div, имеющего границу, и перемещать изображение внутри контейнера влево и вправо.

Как от Документация:

A относительно позиционированный элемент - это элемент, вычисляемое значение position relative. Свойства top и bottom определяют вертикальное смещение от его нормального положения; свойства left и right задают горизонтальное смещение.

Нам нужно обернуть img внутри элемента типа div i.e:

<div class="image-holder">
  <img src="https://image.ibb.co/cxwWPa/services_gas_oil.jpg" >
</div>

Мы применим border к контейнеру и переместим изображение из его нормального положения со следующим CSS:

.image-holder img {
  position: relative;
  z-index: -1;
  left: 40px;
  top: 40px;
}

.image-holder {
  border: 7px solid #76af46;
  display: inline-block;
  vertical-align: top;
}

.image-holder img {
  position: relative;
  z-index: -1;
  left: 40px;
  top: 40px;
}

<div class="image-holder">
  <img src="https://image.ibb.co/cxwWPa/services_gas_oil.jpg" alt="services_gas_oil" border="0">
</div>