我正在使用 Bootstrap 创建轮播，我有大图像，所以当屏幕小于图像时，不会保持比例。
我怎么能改变呢？
这是我的代码：
.carousel .item {
height: 500px;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
我需要图像适合 100% 的宽度，但保持 500 像素的高度（我认为是 500 像素），这应该意味着在较小的屏幕上我们看不到图像的最左侧和最右侧。
我尝试在 div 中包含图像并添加
overflow: hidden;
width: 100%;
height: 500px;
display: block;
margin: 0 auto;
但它不起作用
谢谢！
问题出在这里，在引导 CSS 上：
img {
max-width: 100%;
width: auto 9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
设置max-width: 100%;图像不会比视口大。您需要在 CSS 上覆盖该行为：
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
max-width: none;
}
注意max-width: none;底部添加的。这是默认的最大宽度值并取消设置限制。
这是你的小提琴更新。
我认为最好用 CSS3object-fit属性来处理它。
如果您有固定宽度和高度的图像，并且仍然想保留纵横比，则可以使用object-fit:contain;. 它将保持给定高度和宽度的比例。
例如 ：
img {
height: 100px;
width: 100px;
object-fit: contain;
}
您可以在此处找到更多详细信息：http ://www.creativebloq.com/css3/control-image-aspect-ratios-css3-2122968
希望这对某人有用。
删除img轮播项目内的标签并添加背景。通过这种方式，您可以使用 CSS3 的封面属性。
.item1 {
background: url('bootstrap/img/bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
保持宽高比和轮播 div 的全面覆盖：
img {
object-fit: cover;
overflow: hidden;
}
我可以通过注释掉 carousel.css 行中的高度线来实现这一点，如下所示：
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
/*height: 500px;*/
}
这段代码终于为我工作了：
.carousel .item {
background:#F9F9F9;
border:1px solid #E0E0E0;
overflow:hidden;
margin-bottom:1em;
margin-top:1em;
padding:5px;
}
.carousel-inner > .item > img {
border: 1px solid #DDDDDD;
float: left;
margin: 0pt 3px;
padding: 2px;
height: none;
width: 100%;
}
.carousel-inner > .item > img:hover {
border: 1px solid #000000;
}
正如其他人所提到的，css3 可以很好地解决这个问题。我为容器使用了全宽、固定高度，然后使用“cover”缩放图像保持纵横比，然后丢弃溢出：
.carousel .carousel-inner img {
width: 100%;
height: 30em;
object-fit: cover;
overflow: hidden;
}
显然，上述解决方案对我不起作用（我不知道为什么？）但我发现了另一种使用 javascript 的解决方法。
基本上，这是一种更乏味的方法，但也有效。您使用 jQuery 将轮播高度设置为宽度除以某个纵横比。
这是我的代码：
var aspectRatio = 2.5; //Width to Height!!!
var imageWidth;
var imageHeight;
//bind the window resize event to the method -
//change in carousel width is only triggered when size of viewport changes
$(window).on("resize", methodToFixLayout);
//updates the carousel width when the window is resized
function methodToFixLayout(e){
imageWidth = carousel.width();
console.log("");
console.log("Method width" + imageWidth);
console.log("");
imageHeight = imageWidth / aspectRatio;
carouselContainer.height(imageHeight);
carousel.height(imageHeight);
carouselPic.height(imageHeight);
//solve the carousel glitch for small viewports - delete the carousel
windowWidth = $(window).width();
if (windowWidth < 840){
carousel.hide();
$("#side-navbar").hide();
} else {
carousel.show();
$("#side-navbar").show();
}
}
它似乎对我有用。
希望它也适合你。
您可以自己设置纵横比，也可以使用其他方法。首先，将窗口宽度和高度设置为图片格式正确的视图尺寸。查询宽高，计算出比例。将窗口恢复为原始宽度和高度。用户根本不会注意到变化，但会记录尺寸。
这些答案中的大多数已经足够老了，它们只适用于 Bootstrap 3。这是 Bootstrap 4 的解决方案，它不仅保留了相同的纵横比，而且将图像放入轮播中，因此它们尽可能大而不会失真。这可以防止轮播在具有不同纵横比的幻灯片之间转换时“跳跃”。
对于宽高比与轮播不匹配的图像，您会看到div.stretchy-wrapper边缘周围的背景颜色。您可以将其设置为任何其他颜色，或将其完全删除以让容器的背景颜色显示出来。
要更改轮播的纵横比，请更改 的padding-top属性div.stretchy-wrapper。请注意，图像是通过设置background-imageeach 的属性来指定的.carousel-item，这与 Bootstrap 标准略有不同，但仍然可以很好地工作。
https://codepen.io/km0ser/pen/BazyemW
/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_aspect_ratio_169 */
div.stretchy-wrapper {
background-color: green;
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
div.stretchy-wrapper > div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<div class="container">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="stretchy-wrapper carousel-inner">
<div class="carousel-item active" style="background-image:url('https://picsum.photos/1600/900');">
</div>
<div class="carousel-item" style="background-image:url('https://picsum.photos/900/1600');">
</div>
<div class="carousel-item" style="background-image:url('https://picsum.photos/400/300');">
</div>
<div class="carousel-item" style="background-image:url('https://picsum.photos/300/400');">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- carousel -->
</div><!-- container -->