top parameter relative to the parent container width

Question

I will try to better expose the question. I would do this in a responsive way:
But I have this problem: the "ropes" that keep the picture, when I enlarge (or I decrease) the picture, it loses its vertical position:

Here is my code:

.activity-dipinto{
    width: 100%;
    box-shadow: 0 0 0 2px #AB6712, 0 0 0 3px #D8B611, 0 0 0 9px #794B11, 0 0 0 12px #DCA406, 0 0 0 16px #5D390C, 0 0 0 18px #92660D, 0 2px 6px 18px rgb(0, 0, 0);
    position: relative;

    z-index: 10;
}

.activity-dipinto img{
    width:100%;
    display:inherit;
    margin-top: -2px;
}

.activity-dipinto-wrap{
    margin: 100px;
    width:20%;
}

.activity-dipinto-wrap .filo-1{
    height: 1px;
    width: 52%;
    background: #A2A2A2;
    position: relative;
    top: -40px;
    transform: rotate(-9deg);
    left: -10px;
    z-index: 1;
}

.activity-dipinto-wrap .filo-1:after{
    content: "";
    background: #E1E7E8;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    position: absolute;
    top: -11px;
    left: 100%;
    top: -3px;
    z-index: 15;
    box-shadow: inset 0px 0px 4px 4px rgba(0, 0, 0, 0.58);
}

.activity-dipinto-wrap .filo-2{
    height: 1px;
    width: 52%;
    background: #A2A2A2;
    position: relative;
    top: -41px;
    transform: rotate(9deg);
    left: 51%;
    z-index: 0;
}

<div class="activity-dipinto-wrap">
    <div class="fili">
        <div class="filo-1"></div>
        <div class="filo-2"></div>
    </div>
    <div class="activity-dipinto">
        <img src="http://spotal.net/magazine/wp-content/uploads/2015/02/Picnic-in-the-Mountains.jpg" />
    </div>
</div>

https://jsfiddle.net/kLs4kmyq/
How can I make the 2 ropes position, relative to the image below?

Answer 1

If you don't like pseudo elements try with this:

.fili {
  display: block;
  height: 21px;
  width: 100%;
  margin: 0 auto;
  max-width: 310px;
  float: none;
}
.activity-dipinto-wrap .filo-1 {
  height: 1px;
  width: 52%;
  background: #A2A2A2;
  position: relative;
  top: 15px;
  transform: rotate(-9deg);
  left: -10px;
  z-index: 1;
}
.activity-dipinto-wrap .filo-2 {
  height: 1px;
  width: 52%;
  background: #A2A2A2;
  position: relative;
  top: 14px;
  transform: rotate(9deg);
  left: 51%;
  z-index: 0;
}
.activity-dipinto {
  width: 100%;
  box-shadow: 0 0 0 2px #AB6712, 0 0 0 3px #D8B611, 0 0 0 9px #794B11, 0 0 0 12px #DCA406, 0 0 0 16px #5D390C, 0 0 0 18px #92660D, 0 2px 6px 18px rgb(0, 0, 0);
  position: relative;
  z-index: 10;
  margin: 18px 0;
}

Here fiddle

Answer 2

You could also use only pseudo and background gradients:

vertical margin and padding used to set the ratio :

The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.

Unlike margin properties, values for padding values cannot be negative. Like margin properties, percentage values for padding properties refer to the width of the generated box's containing block.

https://www.w3.org/TR/CSS2/box.html#padding-properties

.wframe {
  box-shadow: 0 0 0 2px #AB6712, 0 0 0 3px #D8B611, 0 0 0 9px #794B11, 0 0 0 12px #DCA406, 0 0 0 16px #5D390C, 0 0 0 18px #92660D, 0 2px 6px 18px rgb(0, 0, 0);
  position: relative;
  width: 20%;
  min-width: 150px;
  margin: 100px 2em 2em;
  display: inline-block;
}
img {
  display: block;
  width: 100%;
}
.wframe:before {
  content: '';
  z-index: -1;
  position: absolute;
  width: 100%;
  padding-top: 20%;
  margin-top: -20%;
  background: linear-gradient(to bottom right, transparent 49.5%, gray 49.5%, gray 50.5%, transparent 50.5%) top left no-repeat, linear-gradient(to bottom left, transparent 49.5%, gray 49.5%, gray 50.5%, transparent 50.5%) top right no-repeat;
  background-size: 50% 80%;
}
.wframe:after {/* however you want to draw your pin here */
  content: 'x';
  position: absolute;
  bottom: 100%;
  margin-bottom: 18%;
  left: 50%;
  margin-left: -0.35em;
  line-height: 0;
  padding: 0.5em 0.25em 0.55em;
  color: gray;
  background: #333;
  box-shadow: 0 0 3px;
  border-radius: 50%;
}

<div class="wframe">
  <img src="http://spotal.net/magazine/wp-content/uploads/2015/02/Picnic-in-the-Mountains.jpg" />
</div>
<div class="wframe">
  <img src="http://spotal.net/magazine/wp-content/uploads/2015/02/Picnic-in-the-Mountains.jpg" />
</div>
<div class="wframe">
  <img src="http://spotal.net/magazine/wp-content/uploads/2015/02/Picnic-in-the-Mountains.jpg" />
</div>

codepen to play with

.wframe {
  box-shadow: 0 0 0 2px #AB6712, 0 0 0 3px #D8B611, 0 0 0 9px #794B11, 0 0 0 12px #DCA406, 0 0 0 16px #5D390C, 0 0 0 18px #92660D, 0 2px 6px 18px rgb(0, 0, 0);
  position: relative;
  min-width: 150px;
  margin: 20% 2em 2em;
}
img {
  display: block;
  width: 100%;
}
.wframe:before {
  content: '';
  z-index: -1;
  position: absolute;
  width: 100%;
  padding-top: 20%;
  margin-top: -17%;
  background: linear-gradient(to bottom right, transparent 49.5%, gray 49.5%, gray 50.5%, transparent 50.5%) top left no-repeat, linear-gradient(to bottom left, transparent 49.5%, gray 49.5%, gray 50.5%, transparent 50.5%) top right no-repeat;
  background-size: 50% 80%;
}
.wframe:after {/* however you want to draw your pin here */
  content: 'x';
  position: absolute;
  bottom: 100%;
  margin-bottom: 16%;
  left: 50%;
  margin-left: -0.35em;
  line-height: 0;
  padding: 0.5em 0.25em 0.55em;
  color: gray;
  background: #333;
  box-shadow: 0 0 3px;
  border-radius: 50%;
}

<div class="wframe">
  <img src="http://spotal.net/magazine/wp-content/uploads/2015/02/Picnic-in-the-Mountains.jpg" />
</div>
<div class="wframe">
  <img src="http://spotal.net/magazine/wp-content/uploads/2015/02/Picnic-in-the-Mountains.jpg" />
</div>
<div class="wframe">
  <img src="http://spotal.net/magazine/wp-content/uploads/2015/02/Picnic-in-the-Mountains.jpg" />
</div>

another codepen to play with