Я использую карусель для отображения изображений с некоторым контентом. Для показа изображения я использую клип. Он отлично проявляется в Chrome, но он не работает в IE, Edge или Firefox.
.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>