2
イメージにスケッチスタイルのボーダーを設定するためのコードを作成しました。以下に見られることができ は：cssを使用してレスポンススケッチボーダーを設定する
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スクリプトを追加しました。イメージをクリックすると、イメージのサイズが変更されます。そして、画像が大きくなると、境界が正しく整列して見えないことがわかります。
これを解決するには、メディアクエリーを追加する必要があります。メディアクエリーでは、上部と境界線の境界を調整できるようにする必要があります。しかし、それ以上の解決策はありますか？
画面サイズが変更されたときあなたは、いくつかの余裕がサイズ変更に応じて（またはウィンドウサイズのチェック）を追加することができますので、あなたは、jqueryのを使用して境界線のプロパティを変更することができ、それを行う必要がありますトリック。 $（window）.resize（function（）{ $（ 'border'）.css（ '/ *変更する* /'）; }）; – JoelBonetR