Corner ribbon in responsive image - html

Question

I need to align the corner ribbon to my image. here's what I managed to do:
<div class="row">
<div class="col-sm-6">
<a href="http://website.com">
<img src="/images/web1.jpg"><div class="ribbon"><span>Featured</span></div></img>
</a><br><br>
<hr>
</div>
<div class="col-sm-6">
<a href="http://website.com">
<img src="/images/web2.jpg"><div class="ribbon"><span>Featured</span></div></img>
</a><br><br>
<hr>
</div>
</div>
the css
.ribbon {
position: absolute;
right: 62px; top: -5px;
z-index: 1;
overflow: hidden;
width: 75px;
height: 75px;
text-align: right;
}
.ribbon span {
font-size: 10px;
color: #fff;
text-transform: uppercase;
text-align: center;
font-weight: bold; line-height: 20px;
transform: rotate(45deg);
width: 100px; display: block;
background: #79A70A;
background: linear-gradient(#9BC90D 0%, #79A70A 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px; right: -21px;
}
.ribbon span::before {
content: '';
position: absolute;
left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid #79A70A;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #79A70A;
}
.ribbon span::after {
content: '';
position: absolute;
right: 0%; top: 100%;
z-index: -1;
border-right: 3px solid #79A70A;
border-left: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #79A70A;
}
the ribbon works fine if I put a fixed height and width, but how do I make the ribbon stick to the right corner of the image? Thanks
EDITED
<div class="row">
<div class="col-sm-6">
<div class="wrappersa"> <a href="http://website.com">
<img class="img-responsive" src="/images/web3.jpg" />
<div class="ribbon-wrapper-green">
<div class="ribbon-green">New</div>
</div>
</a><br><br>
<p><strong>Website</strong<br>This is a website</p><br><hr>
</div>
</div>
<div class="col-sm-6">
</div>
</div>
</div>
CSS
.wrappersa {
margin: 20px auto;
width: 450px;
height: 430px;
position: relative;
}
.ribbon-wrapper-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
}
.ribbon-green {
font-size: 10px;
color: #fff;
text-transform: uppercase;
text-align: center;
font-weight: bold;
line-height: 20px;
transform: rotate(45deg);
width: 100px;
display: block;
background: #79A70A;
background: linear-gradient(#9BC90D 0%, #79A70A 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px;
right: -21px;
}
.ribbon-green:before, .ribbon-green:after {
content:'';
position: absolute;
left: 0px;
top: 100%;
z-index: -1;
border-left: 3px solid #79A70A;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #79A70A;
}
#media (max-width : 992px) {
.wrappersa {
margin: 20px auto;
width: 100%;
height: auto;
position: relative;
}
}

Answer 1

This might help but as you said, the ribbon doesn't truly take into account if the image size is dynamically changed so all image sizes have to be fixed and the same.
Updated with bottom text caption.
figure {
display: inline-block;
}
figure img {
vertical-align: top;
}
figure figcaption {
padding: 5px 0;
text-align: center;
background: #9BC90D;
}
.wrapper a {
color: #fff;
}
/*****************/
.wrapper {
margin: 20px auto;
width: 450px;
height: 430px;
position: relative;
}
.ribbon-wrapper-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
}
.ribbon-green {
font-size: 10px;
color: #fff;
text-transform: uppercase;
text-align: center;
font-weight: bold;
line-height: 20px;
transform: rotate(45deg);
width: 100px;
display: block;
background: #79A70A;
background: linear-gradient(#9BC90D 0%, #79A70A 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px;
right: -21px;
}
.ribbon-green:before,
.ribbon-green:after {
content: '';
position: absolute;
left: 0px;
top: 100%;
z-index: -1;
border-left: 3px solid #79A70A;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #79A70A;
}
#media (max-width: 992px) {
.wrapper {
margin: 20px auto;
width: 100%;
height: auto;
position: relative;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="wrapper">
<a href="https://something.io">
<figure>
<img class="img-responsive" src="http://placehold.it/950x500/1c1c1c/fff/?text=Image" />
<figcaption><strong>Website</strong>
<br>This is a website
</figcaption>
</figure>
<div class="ribbon-wrapper-green">
<div class="ribbon-green">New</div>
</div>
</a>
<hr>
</div>
</div>
<div class="col-sm-6">
<div class="wrapper">
<a href="https://something.io">
<figure>
<img class="img-responsive" src="http://placehold.it/950x500/1c1c1c/fff/?text=Image" />
<figcaption><strong>Website</strong>
<br>This is a website
</figcaption>
</figure>
<div class="ribbon-wrapper-green">
<div class="ribbon-green">New</div>
</div>
</a>
<hr>
</div>
</div>
</div>
</div>