Set up responsive sketched borders using css - html

Question

I have created a code for setting up sketch style borders over image.
Which can be seen below:
jQuery('.border').click(function(){
jQuery('.border').toggleClass('resize');
});
body {
background-color: lightblue;
}
.border {
width: 200px;
margin: 0px auto;
position: relative;
-webkit-transition: all 2s;
/* Safari */
transition: all 2s;
background-image: url(https://nosycrow.com/wp-content/themes/nosy-crow/images/borders/black-400-sides.png);
background-repeat: repeat-y;
background-size: 100%;
border-radius: 15px;
background-position: 0 0;
padding: 5px;
overflow: hidden;
}
.border .padding::before, .border .padding::after {
content: '';
display: block;
position: absolute;
left: 0;
width: 100%;
height: 0;
background: url(https://nosycrow.com/wp-content/themes/nosy-crow/images/borders/black-400.png) no-repeat;
background-size: 100%;
z-index: 50;
padding-bottom: 5.4%;
pointer-events: none;
}
.border .padding::before {
top: 0px;
}
.border .padding::after {
bottom: 0px;
background-position: 0px 100%;
}
.border.resize {
width: 500px;
}
img {
width: 100%;
height: auto;
position: relative;
border-radius: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="border">
<div class="padding">
<img src="https://nosycrow.com/wp-content/uploads/imported-books/Spectre-Collectors-Too-Ghoul-For-School-312087-3-593x911.jpg" alt="">
</div>
</div>
But the issue is, the box is not accurately responsive. To test it out, I have added a little jquery script so when you click on the image, the image resizes. And you can see when the image is bigger, the borders doesn't look aligned properly.
I know in my solution, to fix this I have to add media queries so the borders on top and borders can be adjusted in media queries. But is there any better solution then that?

Answer 1

I got it fixed using different solution. Kind of old school. I used 3 images, horizontal line, vertical line and corner and used them to set up in their position using different divs. Can be seen here
jQuery('.sketchy-box').click(function(){
jQuery('.sketchy-box').toggleClass('resize');
});
.sketchy-box {
width: 300px;
height: auto;
margin: 0px auto;
position: relative;
-webkit-transition: all 1s;
/* Safari */
transition: all 1s;
}
.sketchy-box .bdt {
position: absolute;
z-index: 1;
left: 10px;
top: 0px;
width: calc(100% - 20px);
height: 5px;
background: url("http://aslamdoctor.com/taskapp/horizontal-stroke#4x-100.svg") left top repeat-x;
}
.sketchy-box .bdb {
position: absolute;
z-index: 1;
left: 10px;
bottom: 0px;
width: calc(100% - 20px);
height: 5px;
background: url("http://aslamdoctor.com/taskapp/horizontal-stroke#4x-100.svg") left top repeat-x;
transform: rotate(180deg);
}
.sketchy-box .bdl {
position: absolute;
z-index: 1;
left: 0px;
top: 10px;
width: 5px;
height: calc(100% - 20px);
background: url("http://aslamdoctor.com/taskapp/vertical-stroke#4x-100.svg") left top repeat-y;
transform: rotate(180deg);
}
.sketchy-box .bdr {
position: absolute;
z-index: 1;
right: 0px;
top: 10px;
width: 5px;
height: calc(100% - 20px);
background: url("http://aslamdoctor.com/taskapp/vertical-stroke#4x-100.svg") left top repeat-y;
}
.sketchy-box .corner {
position: absolute;
z-index: 1;
width: 13px;
height: 13px;
background: url("http://aslamdoctor.com/taskapp/corner-stroke#4x-100.svg") left top no-repeat;
}
.sketchy-box .ctl {
left: 0px;
top: 0px;
}
.sketchy-box .ctr {
right: 0px;
top: 0px;
transform: rotate(90deg);
}
.sketchy-box .cbl {
left: 0px;
bottom: 0px;
transform: rotate(-90deg);
}
.sketchy-box .cbr {
right: 0px;
bottom: 0px;
transform: rotate(180deg);
}
.sketchy-box img {
width: 100%;
height: auto;
position: relative;
z-index: 0;
border-radius: 10px;
}
.sketchy-box.resize {
width: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sketchy-box">
<div class="bdl"></div>
<div class="bdr"></div>
<div class="bdt"></div>
<div class="bdb"></div>
<div class="corner ctl"></div>
<div class="corner ctr"></div>
<div class="corner cbl"></div>
<div class="corner cbr"></div>
<img src="https://nosycrow.com/wp-content/uploads/2015/09/BooksAlways_26-27-593x320.jpg" alt="">
</div>