很乱，过渡变大的效果也不太好，怎么破

html：

  <section class="fifth">

    <div class="fifth-title">主打课程</div>

    <div class="img">

    <div><img src="./img/1.jpg"></div>

    <div><img src="./img/2.jpg"></div>

    <div><img src="./img/3.jpg"></div>

    <div><img src="./img/4.jpg"></div>

    <div><img src="./img/5.jpg"></div>

    <div><img src="./img/6.jpg"></div>

  </div>

  </section>

css：

/*fifth splace*/

.fifth{

  background: url(../img/bg.jpg) no-repeat;

  background-size:30rem;

  width: 100%;

  height: 7rem;

}

.fifth > .fifth-title{

  font-size:0.4rem;

  color: #757575;

  margin: 0.4rem;

}

.fifth > .img{

  width: 100%;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-around;

}

.fifth > .img > div {

  width: 25%;

  margin:0.2rem;

}

.fifth > .img > div > img{

  display: block;

  width: 2rem;

  height: 2rem;

  margin:0 auto;

  -webkit-transition: height 1s;

     -moz-transition: height 1s;

      -ms-transition: height 1s;

       -o-transition: height 1s;

          transition: height 1s;

  -webkit-transition: width 1s;

     -moz-transition: width 1s;

      -ms-transition: width 1s;

       -o-transition: width 1s;

          transition: width 1s;

}

/*过渡*/

.fifth > .img > div > img:hover{

  width: 3rem;

  height:3rem;

  -webkit-transition: height 1s;

     -moz-transition: height 1s;

      -ms-transition: height 1s;

       -o-transition: height 1s;

          transition: height 1s;

  -webkit-transition: width 1s;

     -moz-transition: width 1s;

      -ms-transition: width 1s;

       -o-transition: width 1s;

          transition: width 1s;

}

js：

(function (doc, win) {

    var docEl = doc.documentElement,

        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

        recalc = function () {

            var clientWidth = docEl.clientWidth;

            if (!clientWidth) return;

            if(clientWidth>=640){

                docEl.style.fontSize = '100px';

            }else{

                docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';

            }

        };

    if (!doc.addEventListener) return;

    win.addEventListener(resizeEvt, recalc, false);

    doc.addEventListener('DOMContentLoaded', recalc, false);

    recalc();

})(document, window);