zoukankan      html  css  js  c++  java
  • 图片自适应

    .wrapper
            overflow:hidden
            100%
            height:0
            padding-bottom 40.7%
    <div class="wrapper">
            <swiper :options="swiperOption" >
                <!-- slides -->
                <swiper-slide>
                    <img class="swiper-img" src="../../../../static/images/swiper1.jpg" alt="">
                </swiper-slide>
                <swiper-slide>
                    <img class="swiper-img" src="../../../../static/images/swiper2.jpg" alt="">
                </swiper-slide>
                <swiper-slide>
                    <img class="swiper-img" src="../../../../static/images/swiper3.jpg" alt="">
                </swiper-slide>
                <div class="swiper-pagination"  slot="pagination"></div>
            </swiper>
        </div>
    

      wrapper是父级元素

    /*wrapper宽度是百分之百,高度会根据宽度自动撑开40.7,,这样就实现了宽高比例40.7的比例。*/
    /*不能写在height上,因为如果写在高度上 是父级元素的高度*/
  • 相关阅读:
    窗口实训1
    课后练习----实现窗口的切换
    第五次实训作业继承
    课程总结
    999
    777777777777777777777
    7
    6
    5
    事件处理程序
  • 原文地址:https://www.cnblogs.com/gaidalou/p/10715919.html
Copyright © 2011-2022 走看看