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>