试图防止图像在引导轮播中被拉伸

Question

I have a bootstrap 4 carousel that is taking up a good portion of the page. The images are appended through an ajax request once received.

All the photos are taken on the phone, so they are either landscape or portrait style.

bootstrap carousel either stretches the image out too far and the image extends beyond the limit of my div or they appear stretched and skews the quality of the photo. Is there a way to set a limit to the image and adjust it on the fly so each unique photo fits my div?

css for the div that contains my carosuel:

#right_curtain {
    z-index: 1;
    position: fixed;
    left: 20%;
    width: 80%;
    height: 100%

    }

my div for the carosuel:

<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>

and the javascript that appends an image to the carosuel

            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>'));
                }
            }

Answer 1

You can try to add this in CSS:

#right_curtain .carousel-inner img {
  object-fit: cover;
}

Though this solution might not work well for IE11, but personally I don't care for IE11: https://caniuse.com/#search=object-fit

Answer 2

Change this

#right_curtain {
  z-index: 1;
  position: fixed;
  left: 20%;
  width: 80%;
  height: 100%
}

to this

#right_curtain {
  z-index: 1;
  position: fixed;
  width: auto;
  height: 100%;
}

This will cause the image to be the full height of the div its in, and it should size and keep its original image quality. Hopefully this helps.