我创建了一个用于在图像上设置草图样式边框的代码。 这可以在下面看到:
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脚本,所以当你点击图像时,图像会调整大小。并且您可以看到图像更大时,边框看起来不正确。
我知道在我的解决方案中,为了解决此问题,我必须添加媒体查询,以便可以在媒体查询中调整顶部和边框的边框。但那还有更好的解决方案吗?
答案 0 :(得分: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>