【为什么变成2560/2850的时候图片会变成这样？ _布局】

为什么变成2560/2850的时候图片会变成这样？

我也踩过这个坑( 2 )

已统计您的踩坑,无需重复点击

回答(3)

布局

详细描述

截图

代码

    <div id="myCarousel" class="carousel slide">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="../img/task888png.png" class="xte" alt="Third slide">
            </div>
            <div class="item">
                <img src="../img/task888png.png" class="xte" alt="Third slide">
            </div>
            <div class="item">
                <img src="../img/task888png.png" class="xte" alt="Third slide">
            </div>
        </div>
        <!-- 轮播（Carousel）导航 -->
        <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
*{
    margin: 0;
    padding: 0;
}
.header-main{
    width: 100%;
    color: #29b078;
    display: flex;
    justify-content:space-between ;
    margin-top:1rem;
    margin-bottom: 0.5rem;
}
.navigation{
    width: 100%;
    background: #29b078;
    height:9.4rem;
}
.option{
    font-size: 2.5rem;
    display: flex;
    float: right;
    color: #ffffff;
    margin-top: 3.5rem;
    text-indent: 3.5rem;
}
.first-row {
    margin: 10rem 0;
}
.text-first {
    height: 25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.text-first-aside {
    border-left: 1px #dedede dashed;
    display: flex;
    justify-content: center;
}

.box-img {
    width: 10rem;
    height: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

编辑于2025-02-05

时间排序

热门排序

[外门弟子]JS-8
0

我也踩了这个坑，刚刚在官网代码里看到解决办法，你可以试一下~

img的宽度设成100%
即.xte"{
width：100%；
}

查看全部>

编辑于2019-03-13
[外门弟子]JS-10
0

因为你这个图片自带宽高，当浏览器超过显示宽度超过图片最大宽度时就会空白一段，而且图片超过显示范围会出现滚动条，这个得注意点，加个属名在css里给他宽度100%自适应宽度就可以了。

查看全部>

编辑于2019-04-06
[北京|结业弟子]JS-李珅颖
0

因为你不写img的宽高时，他最大就是自己图片本来的大小，需要给img添加宽度为页面的100%，这样他就一直能占满了

查看全部>

编辑于2019-08-31

去第页