使用css設置響應式草繪邊框

我已經創建了用於在圖像上設置草圖樣式邊框的代碼。其中可以看到下面：使用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腳本，因此當您單擊圖像時，圖像大小會調整。而且你可以看到圖像更大時，邊框看起來沒有正確對齊。

我知道在我的解決方案中，爲了解決這個問題，我必須添加媒體查詢，以便在媒體查詢中調整頂部和邊框上的邊界。但是，有沒有更好的解決方案呢？

來源

2017-12-18 aslamdoctor

使用jQuery當屏幕尺寸發生變化，您可以修改邊框屬性，這樣你就可以添加取決於調整大小一定的餘量（或檢查窗口大小），它必須做的招。 $（window）.resize（function（）{（'border'）.css（'/ * modify something * /'）; }）; – JoelBonetR

我用不同的解決方案修復了它。那種舊派。我使用了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/[email protected]") 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/[email protected]") 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/[email protected]") 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/[email protected]") left top repeat-y; 
 
} 
 
.sketchy-box .corner { 
 
    position: absolute; 
 
    z-index: 1; 
 
    width: 13px; 
 
    height: 13px; 
 
    background: url("http://aslamdoctor.com/taskapp/[email protected]") 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>

來源

2017-12-19 04:35:55 aslamdoctor

使用css設置響應式草繪邊框

回答

相關問題