I'm facing an issue with my Bootstrap 4 carousel that takes up a large portion of the page. The images are loaded through an ajax request once received.
Since all the photos are taken on a phone, they are either in landscape or portrait style.
The problem is that the bootstrap carousel either stretches the image too far, causing it to extend beyond the limit of my div, or distorts the image quality by skewing it. Is there a way to set a limit to the image and adjust it dynamically so that each unique photo fits my div?
CSS for the div containing my carousel:
#right_curtain {
z-index: 1;
position: fixed;
left: 20%;
width: 80%;
height: 100%
}
HTML for the carousel:
<div id="right_curtain">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style ="z-index: 0">
<ol class="carousel-indicators">
</ol>
<div class="carousel-inner">
</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>
Here's the JavaScript code that appends an image to the carousel:
for (i = 0; i < count; i++) {
buttonJSON += '<button type="button" class="list-group-item list-group-item-action" id="buttonList'+i+'" onclick=listClick(this) data-value ="'+json[i].id+'"><b>'+json[i].department.replace("_"," ")+'</b><br><b>ADDRESS</b>: '+json[i].address+'<br><b>TYPE</b>: '+json[i].type+'<br><b>USER</b>: '+json[i].user+'</button>';
if(i ===0){
$('.carousel-indicators').append($('<li data-target="#carouselExampleIndicators" class="active"> data-slide-to="'+i+' "></li>'));
$('.carousel-inner').append($('<div class="carousel-item active"> <img class="d-block w-100" src="' + json[i].link + '" alt="'+json[i].id+'" data-value ="'+json[i].id+'" ></div>'));
}else{
$('.carousel-indicators').append($('<li data-target="#carouselExampleIndicators" data-slide-to="'+i+'"></li>'));
$('.carousel-inner').append($('<div class="carousel-item"> <img id = "image'+i+'"class="d-block w-100" src="' + json[i].link + '" alt="'+json[i].id+'" data-value ="'+json[i].id+'" ></div>'));
}
}