调整Bootstrap Carousel宽度适配不同尺寸图片的技术咨询

首先来解答你的疑问：为什么高度能自适应但宽度不行？
Bootstrap的.carousel默认是块级元素，它的宽度会默认继承父容器（这里是.container）的宽度，而块级元素不会根据内部内容自动收缩宽度；但高度是由内部的图片内容撑开的，所以切换图片时高度会跟着变化，宽度却一直占满父容器的宽度，哪怕图片本身更窄。

接下来是具体的解决办法，分两步调整：

1. 修正Carousel的容器样式，让它随内容收缩 #

你原来的代码里有个错误：data-ride="carousel" margin: 0 auto"是无效的，样式应该放在style属性里。我们需要给.carousel添加样式，让它不再强制占满父容器宽度：

• 使用max-width: fit-content，让容器宽度由内部图片决定
• 加上margin: 0 auto让轮播居中显示（可选，根据你的布局需求）

修改后的Carousel容器代码：

<div id="myCarousel" class="carousel slide" data-ride="carousel" style="max-width: fit-content; margin: 0 auto;">

2. 确保图片自适应容器宽度 #

给轮播里的图片添加样式，保证图片不会超出容器，同时保持比例：
你可以直接用Bootstrap自带的img-fluid类，它已经包含了max-width:100%; height:auto;的样式：

<asp:Image ID="Image1" ImageUrl='<%# Eval("FileName") %>' runat="server" CssClass="img-fluid" />

如果需要全局设置，也可以添加自定义CSS：

.carousel-inner img {
    max-width: 100%;
    height: auto;
}

完整修改后的代码示例 #

<div class="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel" style="max-width: fit-content; margin: 0 auto;">
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <asp:Repeater ID="repeaterImages" runat="server">
                <ItemTemplate>
                    <div class="carousel-item <%# (Container.ItemIndex == 0 ? "active" : "") %>">
                        <asp:Image ID="Image1" ImageUrl='<%# Eval("FileName") %>' runat="server" CssClass="img-fluid" />
                    </div>
                </ItemTemplate>
            </asp:Repeater>
        </div>
        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

（注：我把你原来的carousel item改成了carousel-item，这是Bootstrap 3及以上版本的正确类名，之前的写法属于笔误）

这样调整后，轮播容器的宽度就会自动适配当前显示图片的宽度，同时保持高度自适应，完美解决你的问题~

内容的提问来源于stack exchange，提问作者Imrik