用vue来完成图片自适应布局

Question

横着依次排列4张图片， 怎么做自适应布局使得图片的高等于图片的宽？在vuejs中实现 求解

Answer 1

.box{

                    position: relative;

                    padding-top: 25%;

                    overflow: hidden;

                    width: 25%;

                    float: left;

                }

                .box img{

                    position: absolute;

                    top: 0;

                    width: 100%;

                    height: 100%;

                }

<div class="box">

            <img src="img/2e0f7f7.png"/>            

        </div>

        <div class="box">

            <img src="img/2e0f7f7.png"/>            

        </div>

        <div class="box">

            <img src="img/2e0f7f7.png"/>            

        </div>

        <div class="box">

            <img src="img/2e0f7f7.png"/>            

        </div>

用vw的话

.box{

font-size：0;

}

img{

        width: 25vw;

        height: 25vw;

        vertical-align: top;

}

<div class="box">

<img src="img/2e0f7f7.png"/>    

<img src="img/2e0f7f7.png"/>    

<img src="img/2e0f7f7.png"/>    

<img src="img/2e0f7f7.png"/>            

</div>