У меня есть Bootstrap 4 модал, который содержит карусель, и я хотел бы заполнить все тело модала изображением размером 700px x 450px без рамки / поля / отступов вокруг левой / верхней / правой части изображение. Я хотел бы, чтобы нижний колонтитул был виден, чтобы я мог поместить текст и кнопку закрытия
Вот Codepen
Вот аналогичный пример того, что я пытаясь достичь внешнего вида изображения, не обращайте внимания на все, что не является изображением.
<div class="container">
<h1 class="display-4 text-center mb-4">Sample Modal</h1>
<div class="row mb-4">
<div class="col text-center">
<a href="#" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#largeModal">Click to open Modal</a>
</div>
</div>
<!-- modal -->
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<!-- carousel -->
<div
id='carouselExampleIndicators'
class='carousel slide'
data-ride='carousel'
>
<ol class='carousel-indicators'>
<li
data-target='#carouselExampleIndicators'
data-slide-to='0'
class='active'
></li>
<li
data-target='#carouselExampleIndicators'
data-slide-to='1'
></li>
<li
data-target='#carouselExampleIndicators'
data-slide-to='2'
></li>
</ol>
<div class='carousel-inner'>
<div class='carousel-item active'>
<img class='img-size' src='https://images.unsplash.com/photo-1485470733090-0aae1788d5af?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1391&q=80' alt='First slide' />
</div>
<div class='carousel-item'>
<img class='img-size' src='https://images.unsplash.com/photo-1491555103944-7c647fd857e6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80' alt='Second slide' />
</div>
<div class='carousel-item'>
<img class='img-size' src='https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80' alt='Second slide' />
</div>
</div>
<a
class='carousel-control-prev'
href='#carouselExampleIndicators'
role='button'
data-slide='prev'
>
<span class='carousel-control-prev-icon'
aria-hidden='true'
></span>
<span class='sr-only'>Previous</span>
</a>
<a
class='carousel-control-next'
href='#carouselExampleIndicators'
role='button'
data-slide='next'
>
<span
class='carousel-control-next-icon'
aria-hidden='true'
></span>
<span class='sr-only'>Next</span>
</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
.img-size{
/* padding: 0;
margin: 0; */
height: 450px;
width: 700px;
background-size: cover;
overflow: hidden;
}
.modal-body {
width: 700px;
height: 450px;
}
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23009be1' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
width: 30px;
height: 48px;
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23009be1' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
width: 30px;
height: 48px;
}