2017-09-28 30 views
10

के लिए काम नहीं कर रहा है मैं कुछ सामग्री के साथ छवियों को प्रदर्शित करने के लिए एक कैरोसेल का उपयोग कर रहा हूं। छवि दिखाने के लिए मैं क्लिप पथ का उपयोग कर रहा हूँ। यह क्रोम में पूरी तरह से दिखाता है, लेकिन यह आईई, एज, या फ़ायरफ़ॉक्स में काम नहीं करता है।क्लिप पथ फ़ायरफ़ॉक्स, आईई, या एज

.carousel-inner>.item>a>img, 
 
.carousel-inner>.item>img, 
 
.img-responsive, 
 
.thumbnail a>img, 
 
.thumbnail>img { 
 
    display: inline-block; 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 

 
body { 
 
    background-image: url('../../Images/Plain-BG.PNG'); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    font-family: Kamban !important; 
 
} 
 

 
footer { 
 
    background-image: url(../../Images/DT-Logo.png); 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    background-position: right; 
 
    position: absolute; 
 
    right: 10%; 
 
    top: 85%; 
 
    width: 100%; 
 
    padding-top: 5%; 
 
} 
 

 
.news-img { 
 
    width: 42.5%; 
 
    margin-top: 13%; 
 
    clip-path: polygon(6% 4%, 94% 11%, 94% 91%, 5% 92%); 
 
    margin-left: 8.5%; 
 
} 
 

 
.title { 
 
    margin: 0px; 
 
    width: 40%; 
 
    position: absolute; 
 
    top: 43%; 
 
    height: auto; 
 
    left: 57%; 
 
    color: #fff; 
 
    word-break: break-word; 
 
} 
 

 
.carousel-inner>.item>a>img, 
 
.carousel-inner>.item>img, 
 
.img-responsive, 
 
.thumbnail a>img, 
 
.thumbnail>img { 
 
    height: auto !important; 
 
} 
 

 
.title p { 
 
    line-height: 1.7em; 
 
    font-size: 2.5em; 
 
    text-align: center; 
 
    word-break: break-word; 
 
} 
 

 
header { 
 
    background-image: url(../../Images/Mukkiya-Seithigal.png); 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    background-position: right; 
 
    position: absolute; 
 
    top: 18%; 
 
    right: 4%; 
 
    width: 100%; 
 
    padding-top: 5%; 
 
}
<div class="Maindiv"> 
 
    <header></header> 
 
    <article> 
 
    <div id='carousel-container'> 
 
     <div class="carousel slide" data-ride="carousel"> 
 
     <div class="wholediv carousel-inner"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </article> 
 
    <footer></footer> 
 
</div>

मैं चित्र URL और एक स्क्रिप्ट के माध्यम से मेरे फ़ीड URL से अपनी सामग्री हो रही है। तो मैं केवल स्क्रिप्ट के माध्यम से विवरण बाध्यकारी हूँ।

+0

IE और बढ़त क्लिप-पथ –

+0

मैं यह कैसे दूर कर सकते हैं का समर्थन नहीं करते ?? –

+0

एक पॉलीफिल है लेकिन मैंने व्यक्तिगत रूप से इसका उपयोग नहीं किया है इसलिए मैं सलाह नहीं दे सकता https://github.com/AlfonsoFilho/ClipPath –

उत्तर

7

अपनी छवि के साथ एक पैटर्न के रूप में एसवीजी का उपयोग करने पर विचार करें और clip-pathpoints के रूप में।

<svg height="186px" width="300px"> 
 
    <defs> 
 
    <pattern id="pattern" height="100%" width="100%" patternUnits="userSpaceOnUse" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice"> 
 
     <image height="1" width="1" xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Crossing_the_River_Styx.jpg/300px-Crossing_the_River_Styx.jpg" preserveAspectRatio="xMidYMid meet"></image> 
 
    </pattern> 
 
    </defs> 
 
    <polygon points="18 7, 282 20, 282 150, 15 171" fill="url(#pattern)"></polygon> 
 
</svg>

यह भी कुछ स्क्रिप्ट का उपयोग करने एसवीजी में एक गतिशील लोड छवि "कन्वर्ट" संभव है। उदाहरण के लिए:

function clip() { 
 
    let img = document.querySelector('img'); 
 

 
    let svg = document.querySelector('svg'); 
 
    svg.setAttribute('height', img.clientHeight + 'px'); 
 
    svg.setAttribute('width', img.clientWidth + 'px'); 
 
    svg.querySelector('pattern image').setAttribute('xlink:href', img.src); 
 

 
    let pointsRaw = img.getAttribute('data-points').split(/,\s/); 
 
    let points = ''; 
 
    for (let i = 0; i < pointsRaw.length; i++) { 
 
    let coord = pointsRaw[i].replace(/%/g, '').split(' '); 
 
    let x = img.clientWidth * coord[0]/100; 
 
    let y = img.clientHeight * coord[1]/100; 
 
    points += Math.round(x) + ' ' + Math.round(y) + ' '; 
 
    } 
 
    svg.querySelector('polygon').setAttribute('points', points); 
 

 
    img.style.display = 'none'; 
 
    document.querySelector('button').style.display = 'none'; 
 
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Crossing_the_River_Styx.jpg/300px-Crossing_the_River_Styx.jpg" data-points="6% 4%, 94% 11%, 94% 80%, 5% 92%"> 
 

 
<svg height="0" width="0"> 
 
    <defs> 
 
    <pattern id="pattern" height="100%" width="100%" patternUnits="userSpaceOnUse" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice"> 
 
     <image height="1" width="1" xlink:href="" preserveAspectRatio="xMidYMid meet"></image> 
 
    </pattern> 
 
    </defs> 
 
    <polygon fill="url(#pattern)"></polygon> 
 
</svg> 
 

 
<button onclick="clip()">Clip</button>

1

वर्तमान में क्लिप-पथ पूर्ण ब्राउज़र समर्थन नहीं है। अधिक जानकारी पर: https://caniuse.com/#search=clip-path

enter image description here

यह नोट में पता चलता है, एसवीजी समर्थित है ... अगर एम्बेडेड या तत्वों ऑब्जेक्ट का उपयोग। देखें: https://caniuse.com/#feat=svg

-2

बढ़त में के रूप में जोड़ सफारी और moz में समर्थन करने के कारण -webkit-clip-path: polygon(6% 4%, 94% 11%, 94% 91%, 5% 92%); इसकी अभी भी समर्थित नहीं

संबंधित मुद्दे