引导轮播大小调整图像

如何解决引导轮播大小调整图像?

开发过程中遇到引导轮播大小调整图像的问题如何解决?下面主要结合日常开发的经验,给出你关于引导轮播大小调整图像的解决方法建议,希望对你解决引导轮播大小调整图像有所启发或帮助;

问题描述

调整图像大小的原因是因为它流动。您有两种方法可以做到:

  1. 可以使用CSS为图像提供固定尺寸,例如:
.carousel-inner > .item > img {
  wIDth:640px;
  height:360px;
}
  1. 第二种方法可以做到这一点:
.carousel {
  wIDth:640px;
  height:360px;
}

解决方法

嗨,我正在尝试使用bootstrap在我的wordpress网站上制作轮播。我想在其旁边放置四个块链接。我在那里有块,图像滚动良好,但是我相信轮播会改变图像的高度。

我有图像(640 x
360),并且将4个块设置为90像素高。我这样做是为了使块与转盘底部齐平。除了块太大。我不明白这可能是什么问题。而且我搜索了所有CSS。

这是我的代码:

<!--==========================================-->
<!-- Carousel                                 -->
<!--==========================================-->
<div>
    <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">

            <!--Carousel item 1-->
            <div class="item active">
                <img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/ej-manuel.png" alt="buffalo-skyline" width="640" height="360" />
                <div class="carousel-caption">
                    <h4>First Thumbnail label</h4>
                        <p>Cras justo odio,dapibus ac facilisis in,egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
            </div>

            <!--Carousel item 2-->
            <div class="item">
                <img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/image3.jpg" width="640" height="360" />
                <div class="carousel-caption">
                    <h4>Second Thumbnail label</h4>
                        <p>Cras justo odio,egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
            </div>

            <!--Carousel item 3-->
            <div class="item">
                <img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/images.jpg" alt="the-buzz-img3" width="640" height="360" >
                <div class="carousel-caption">
                    <h4>Third Thumbnail label</h4>
                    <p>Cras justo odio,egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</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>

<!--==========================================-->
<!-- Side Buttons                             -->
<!--==========================================-->
<div>
    <ul class="nav nav-tabs nav-stacked">
        <li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 1</a></li>
        <li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 1</a></li>
        <li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 4</a></li>
        <li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 5</a></li>
    </ul>
</div>

编程问答相关问答

我的环境详情: <ul> <li>操作系统:Ubuntu 20.04</li> <li>节点版本:9.6.1</li> <li>Qt 版本:5.9.1</li> </ul> 我
此问题使用 <a href="https://people.ucsc.edu/%7Emclapham/eart125/data/georoc.csv" rel="nofollow noreferrer">https://people.ucsc.edu/~
对不起,我正在绞尽脑汁想办法解决这个问题。 我的 kafka 代理说等待连接到 Zookeper 然后关闭(超时)
我有一个 pypsark 数据框保存为 <code>temp_view</code>,我需要将它保存到 <code>Table2</code> 中的 <code>DB2</code>
我想在 <a href="https://www.brightsign.biz/digital-signage-products/XT-product-line/XT1144" rel="nofollow noreferrer">BrightSign XT114
我对 sql 很陌生,一直在尝试使用以下脚本对其进行参数化。 <strong>这是我的代码:</strong> <pre><
<ol> <li>现在我正在考虑为 android 开发一个应用程序并想要获取位置信息。</li> <li>所以我决定使用 xamarin 的
我正在使用 TestNg 运行并行测试,我想在脚本中的某些点停止/终止线程。这个脚本有很多层,所以简单
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注