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上,因为如果写在高度上 是父级元素的高度*/
  • 相关阅读:
    第十四次会议
    第十三次会议
    第十二次会议
    第十一次会议
    第十次会议
    第九次会议
    第八次会议
    第七次会议
    第六次会议
    机器学习
  • 原文地址:https://www.cnblogs.com/gaidalou/p/10715919.html
Copyright © 2011-2022 走看看