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>

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

1 个答案: