当我添加<a href...=""> tags? Any ideas?

Question

When I try to add

 <a>..</a> 

around the img tags to make the whole image a link, it works but stops being responsive so mobile view gets distorted.

Any ideas how to fix this?

Thanks!

   div class="slider-wrap">
            <div class="fullwidthbanner-container" >
           <div class="fullwidthbanner-3" style="padding-top: 0px;">
                   <ul>
                <!-- SLIDE  1-->
            <li data-transition="slideright" data-slotamount="7" data-masterspeed="300" data-thumb="img/about2.png"  data-saveperformance="off"  data-title="HOP"></a>
                        <img src="img/aboutslide1.png"  alt="bg" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">

                    </li>

            <li data-transition="slideright" data-slotamount="7" data-masterspeed="300" data-thumb="img/about3.png"  data-saveperformance="off"  data-title="SKIP">
                        <!-- MAIN IMAGE -->
                        <img src="img/about2.jpg"  alt="bg"  data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">

                    </li>

                <li data-transition="slideright" data-slotamount="7" data-masterspeed="300" data-thumb="img/aboutslide1.png"  data-saveperformance="off"  data-title="JUMP">
                        <!-- MAIN IMAGE -->
                        <img src="img/about3.jpg"  alt="bg"  data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">

                    </li>


                        </div>