.square { float:left; position: relative; width: 100px; padding-bottom : 100px; /* = width for a 1:1 aspect ratio */ margin:1.66%; background-position:center center; background-repeat:no-repeat; background-size:cover; /* you change this to "contain" if you don't want the images to be cropped */ } .img_1{background-image:url('2016/macao2/1.jpg');} .img_2{background-image:url('2016/macao2/2.jpg');} .img_3{background-image:url('2016/macao2/3.jpg');} .img_4{background-image:url('2016/macao2/4.jpg');} .img_5{background-image:url('2016/macao2/5.jpg');} .img_6{background-image:url('2016/macao2/6.jpg');} .img_7{background-image:url('2016/macao2/7.jpg');} .img_8{background-image:url('2016/macao2/8.jpg');} .img_9{background-image:url('2016/macao2/9.jpg');} .img_10{background-image:url('2016/macao2/10.jpg');} .img_11{background-image:url('2016/macao2/11.jpg');} .img_12{background-image:url('2016/macao2/12.jpg');} .img_13{background-image:url('2016/macao2/13.jpg');} .img_14{background-image:url('2016/macao2/14.jpg');} .img_15{background-image:url('2016/macao2/15.jpg');} .img_16{background-image:url('2016/macao2/16.jpg');} .img_17{background-image:url('2016/macao2/17.jpg');} .img_18{background-image:url('2016/macao2/18.jpg');} .img_19{background-image:url('2016/macao2/19.jpg');} .img_20{background-image:url('2016/macao2/20.jpg');} .img_21{background-image:url('2016/macao2/21.jpg');} .img_22{background-image:url('2016/macao2/22.jpg');} .img_23{background-image:url('2016/macao2/23.jpg');} .img_24{background-image:url('2016/macao2/24.jpg');} .img_25{background-image:url('2016/macao2/25.jpg');} .img_26{background-image:url('2016/macao2/26.jpg');} .img_27{background-image:url('2016/macao2/27.jpg');} .img_28{background-image:url('2016/macao2/28.jpg');} .img_29{background-image:url('2016/macao2/29.jpg');} .img_30{background-image:url('2016/macao2/30.jpg');}