Question

我有一个bootstrap 4轮播，占据了页面的很大一部分。收到后，图像将通过ajax请求附加。

所有照片都是在手机上拍摄的，因此它们可以是风景照片或肖像照片。

bootstrap carousel要么将图像拉得太远而且图像超出了我的div的限制，否则它们会拉伸并扭曲照片的质量。有没有办法设置图像的限制并在运行中进行调整，以便每张独特的照片适合我的div？

包含我的carosuel的div的css：

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

    }

我的carosuel div：

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

以及将图像附加到carosuel

的javascript

            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

您可以尝试在CSS中添加：

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

虽然这个解决方案可能不适用于IE11，但我个人并不关心IE11： https://caniuse.com/#search=object-fit

Answer 2

更改此

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

到这个

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

这将使图像成为div的全高，并且应该调整大小并保持其原始图像质量。希望这会有所帮助。

试图阻止图像在引导旋转木马内拉伸

2 个答案: