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

Question

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

Answer 1

.box{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-top: 25%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 25%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; float: left;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .box img{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<div class="box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="img/2e0f7f7.png"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="img/2e0f7f7.png"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="img/2e0f7f7.png"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="img/2e0f7f7.png"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </div>用vw的话.box{font-size：0;}img{&nbsp; &nbsp; &nbsp; &nbsp; width: 25vw;&nbsp; &nbsp; &nbsp; &nbsp; height: 25vw;&nbsp; &nbsp; &nbsp; &nbsp; vertical-align: top;}<div class="box"><img src="img/2e0f7f7.png"/>&nbsp; &nbsp;&nbsp;<img src="img/2e0f7f7.png"/>&nbsp; &nbsp;&nbsp;<img src="img/2e0f7f7.png"/>&nbsp; &nbsp;&nbsp;<img src="img/2e0f7f7.png"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</div>