Question

我正在使用自举旋转木马，但我想要一个固定的宽度和高度，以便我的所有图像都能自动适应定义的高度和宽度。有人可以帮助我实现这一目标。非常感谢你。

<div class="row">
                <div class="span8">
                    <div id="myCarousel" class="carousel slide">
                        <ol class="carousel-indicators">
                            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                            <li data-target="#myCarousel" data-slide-to="1" class=""></li>
                            <li data-target="#myCarousel" data-slide-to="2" class=""></li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="item active">

                                <img src="~/Images/Carousel/carousel_1.jpg" alt="http://www.google.com">
                                <div class="carousel-caption">
                                    <h4>First Thumbnail label</h4>

                                    <p>Deals you cannot miss.</p>
                                </div>
                            </div>
                            <div class="item">
                                <img src="~/Images/Carousel/carousel_2.jpg" alt="http://www.google.com">
                                <div class="carousel-caption">
                                    <h4>Second Thumbnail label</h4>

                                    <p>Claim it now.</p>
                                </div>
                            </div>
                            <div class="item">
                                <img src="~/Images/Carousel/carousel_1.jpg" alt="http://www.google.com">
                                <div class="carousel-caption">
                                    <h4>Third Thumbnail label</h4>

                                    <p>Act fast. Only for today.</p>
                                </div>
                            </div>
                        </div>
                        <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
                        <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
                    </div>
                </div>
            </div>

Answer 1

将以下样式应用于轮播列表框。

＆＃13;

<div class="carousel-inner" role="listbox" style=" width:100%; height: 500px !important;">

...

</div

＆＃13;

Answer 2

因为某些图片的高度可能低于500px，所以保持自动调整效果会更好，所以我建议如下：

<div class="carousel-inner" role="listbox" style="max-width:900px; max-height:600px !important;">`

Answer 3

在您的主"ignore_regexes": [ /* leave default rules*/ "/var/www/someFolderLike/Lib/Zend/", "/var/www/anotherFolder/", ]文件中将高度/自动更改为您想要的任何设置。例如，styles.css：

500px

Answer 4

要在不同设备上保持一致的图像流，您必须为每个轮播图像项指定宽度和高度值，例如，在我的示例中，图像将采用整个宽度，但高度为“400px”（您可以指定您的个人价值）

<div class="item">
        <img src="image.jpg" style="width:100%; height: 400px;">
      </div>

Answer 5

set style =“ height：300px！important;”和“ imgBanner”作为img标签。

<img src="/image/1.jpg" class="imgBanner" style="width:100%; height:300px !important;">

然后，如果您想要响应式图像，则可以将jquery用作：

$.(function(){
   $(window).resize(respWhenResize);
   respWhenResize();
 })



respWhenResize(){
 
       if (pagesize < 578) {
         $('.imgBanner').css('height','200px')
        } else if (pagesize > 578 ) {
            $('.imgBanner').css('height','300px')
        }
     }

固定高度和宽度的自举旋转木马

5 个答案: