使用css设置响应式草绘边框

Question

我已经创建了用于在图像上设置草图样式边框的代码。 其中可以看到下面：

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>

但问题是，这个盒子是不准确的响应。为了测试它，我添加了一个小的jquery脚本，因此当您单击图像时，图像大小会调整。而且你可以看到图像更大时，边框看起来没有正确对齐。

我知道在我的解决方案中，为了解决这个问题，我必须添加媒体查询，以便在媒体查询中调整顶部和边框上的边界。但是，有没有更好的解决方案呢？

Answer 1

我用不同的解决方案修复了它。那种旧派。我使用了3幅图像，水平线，垂直线和角落，并使用它们在不同的div上设置了它们的位置。在这里可以看到

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>