Question

我使用Bootstrap 3创建了三张幻灯片的旋转木马。

在carousel-inner所在的item我添加了图片代码。它们效果很好，因为它们是幻灯片的图像，并且它们会根据屏幕大小自行调整。

在item内carousel-caption我添加了h1标记，其中包含image标记。这张图片没有调整大小，它总是很大。

我错过了什么？

我的代码：

<!-- Carousel -->
            <div id="carousel-main" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-main" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-main" data-slide-to="1"></li>
                    <li data-target="#carousel-main" data-slide-to="2"></li>
                </ol>


                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">

                    <div class="item active">
                        <img src="images/1.jpg" alt="img1">
                        <div class="carousel-caption">
                            <h1>
                                <img src="images/logo_medium.png">
                            </h1>
                            <h2>Hello</h2>
                            <p>
                                <a href="#" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#myModal">Сделать заказ</a>
                            </p>
                        </div>
                    </div>

                    <div class="item">
                        <img src="images/2.jpg" alt="img2">
                        <div class="carousel-caption">
                            ...
                        </div>
                    </div>

                    <div class="item">
                        <img src="images/3.jpg" alt="img3">
                        <div class="carousel-caption">
                            ...
                        </div>
                    </div>

                </div>

                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-main" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#carousel-main" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>



            </div>
            <!-- /. Carousel -->

Answer 1

您应该为您的图片提供类，如下所示：

<img **class="img-responsive"** src="img/show1.png" alt="" />

Css：img-responsive {max-width：100％;}

Bootstrap，旋转木马标题内的图像没有响应

1 个答案: