How to remove extra white space between div rows and make all div images square size?

前端 未结 3 1912
盖世英雄少女心
盖世英雄少女心 2021-01-17 07:02

I have created the following page for ios devices when I display the page on iPhone I get extra white space at the bottom of each row! I don\'t know how to remove the extra

3条回答
  •  悲哀的现实
    2021-01-17 07:35

    Try to change heigh of this class

    .images .line .img {
        cursor: pointer;
        position: relative;
        text-align: center;
        width: 47vw;
        height: 22vw;
        margin-right: 1vw
    
    }
    

    a {
        text-decoration: none;
        color: #003569
    }
    
    
    
    .images .line {
        margin-bottom: 14vw;
        margin-left: 2vw;
        margin-right: 2vw;
        display: flex
    }
    
    .images .line .img {
        cursor: pointer;
        position: relative;
        text-align: center;
        width: 47vw;
        height: 22vw;
        margin-right: 1vw
    
    }
    
    .images .line .img .img-wrap {
        height: 100%;
        overflow: hidden;
        position: relative;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        background: #fff
    }
    
    .images .line .img .img-wrap:hover .desc {
        transform: translateY(0)
    }
    
    .images .line .img img {
        width: 100%;
        position: absolute;
        left: 0
    }
    
    .images .line .img .icon {
        display: none
    }
    
    .images .line .img .download {
        position: absolute;
        bottom: -46px;
        display: inline-block;
        background: rgba(255, 255, 255, .7);
        border-radius: 3px;
        padding: 8px 10px;
        color: #555;
        left: 50%;
        font-size: 14px;
        transform: translateX(-50%);
        box-shadow: .5px .5px 2px rgba(0, 0, 0, .1)
    }
    
    .images .line .img .video {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 25px;
        height: 25px;
        background-image: url(./img/icon1.png);
        background-size: cover;
        z-index: 1000
    }
    
    .images .line .img .Carousel {
        position: absolute;
        top: 15px;
        right: 20px;
        width: 30px;
        height: 30px;
        background-image: url(./img/icon2.png);
        #background-size: cover;
        background-size: 65px 65px;
        background-position: 0 0;
        z-index: 1000
    
    }
    
    
    
    
    
    
    
    
    
    
    
    

提交回复
热议问题