How can I make multiple inline images responsive?

Question

I am new to this site and to web development in general, but I am working on a project that I need a bit of help with. Please bear with me as I am still new to this so I understand my code is sloppy and probably inefficient.

I am working on a sticky header that will stay visible as you scroll down the page. In addition, as you click on the links I would like them to be highlighted and then move to a particular location on the page through a scrolling action. When you click on 1, it should be highlighted and the others should be grayed out.

Since I am using a unique shape to do this I simply used images. I do not know any better so if you have suggestions it would be greatly appreciated. However, this is not the point of my question to you all. I have already figured out how to make the header work by utilizing the knowledge-base here on stack overflow. However, I need to optimize the element so that it is responsive for smaller viewports. I am uncertain how to do this given that I have multiple divs, images and scripts. Every time I try to accomplish this I break some other aspect of the header's functionality. Any help or direction would be greatly appreciated. I don't even know where to start here.

JSFiddle Demo

$(document).ready(function() {
  $('div[id^="section"]').on('click', function() {
    $('div[id^="section"]').addClass('not-active');
    $(this).removeClass('not-active');
  });
});


var $window = $(window),
       $stickyEl = $('.fusion-page-title-bar'),
       elTop = $stickyEl.offset().top;

   $window.scroll(function() {
        $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
    });


$('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
        || location.hostname == this.hostname) {

        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
           if (target.length) {
             $('html,body').animate({
                 scrollTop: target.offset().top - 225
            }, 1000);
            return false;
        }
    }
});

.fusion-page-title-bar {
        background-color: rgba(77,77,77,0.6) !important;
    z-index: 9999 !important;
    position: sticky !important;
    position: -webkit-sticky !important;
    position: -moz-sticky !important;
    position: -ms-sticky !important;
    position: -o-sticky !important;
    top: 135px !important;
    height: 71px;
    border: none;
}
}

.fusion-page-title-bar.sticky{

position: fixed;
     top: 0;
     }

#main{padding-top:0px !important;}

.stickybanner {
  height: 71px;
  text-align:center !important;
  width:1596px !important;
  position:relative !important;
  margin:auto !important;
  background-color:gray;
}

[id^="section"] {
    position: absolute;
    display: inline;
}

[id^="section"] img:last-child {
  display: none;
}

[id^="section"].not-active img:last-child {
  display: block;
}

[id^="section"].not-active img:first-child {
  display: none;
}

#section1 {
  left: 26px;
  position:absolute !important;
}

#section2 {
  left: 325px;
    position:absolute !important;
}

#section3 {
  left: 624px;
    position:absolute !important;
}

#section4 {
  left: 923px;
    position:absolute !important;
}

#section5 {
  left: 1222px;
    position:absolute !important;
}

.hidecode{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stickybanner">
<a href="#sections1">
    <div id="section1">
        <img src="http://imgur.com/A3hv0f3.png">
        <img src="http://imgur.com/iQv7yhd.png">
     </div>
  </a>

    <a href="#sections2">
  <div id="section2">
    <img src="http://imgur.com/Ld1TntV.png">
    <img src="http://imgur.com/oziGN60.png">
       </div>
      </a>

      <a href="#sections3">
    <div id="section3">
    <img src="http://imgur.com/zpViBoy.png">
    <img src="http://imgur.com/f5wSB6N.png">
     </div>
    </a>

    <a href="#sections4">
     <div id="section4">
    <img src="http://imgur.com/hgt5u84.png">
    <img src="http://imgur.com/Skhrull.png">
        </div></a>

    <a href="#sections5">
    <div id="section5">
    <img src="http://imgur.com/iOThUy8.png">
    <img src="http://imgur.com/lLRbfvT.png">
        </div></a>


    </div>

Answer 1

You can rather use CSS for making elements of arrow shaped. It will give you more flexibility and functionality and will be reusable and manageable.

I have made a JSFiddle depicting how can you make a arrow shaped div, the kind you require. You can tweak further more into it to achieve what exactly you want to.

https://jsfiddle.net/mzo5mqz2/

* {
	margin: 0;
	padding: 0;
}
/*Header full width*/
.header{
	width: 100%;
	position: fixed;
}
/*Common CSS to display tab shape*/
.header__tab{
    min-width: 250px;
    width: calc(20% - 20px);
    line-height: 50px;
    position: relative;
    text-align: center;
    margin: 50px auto;
    display: inline-block;
}
.header__tab:after, .header__tab:before{
    content:"";
    position:absolute;
    width:20px;
    height:50%;
    left:100%;
}
.header__tab--left__before, .header__tab--left__after {
	content: "";
    position: absolute;
    width: 20px;
    height: 50%;
    left: -20px;
}
/*Color for Tab 1*/
.tab1 {
	background: red;
}
.tab1:after{
    bottom:0;
    background: linear-gradient(to right bottom, red 50%, transparent 50%);
}
.tab1:before{
    top:0;
    background: linear-gradient(to right top, red 50%, transparent 50%);
}
.tab1--before {
	top: 0;
    background: linear-gradient(to right top, transparent 50%, red 50%);
}
.tab1--after {
	bottom: 0;
    background: linear-gradient(to right bottom, transparent 50%, red 50%);
}

/*Color for Tab 2*/
.tab2 {
	background: yellow;
}
.tab2:after{
    bottom:0;
    background: linear-gradient(to right bottom, yellow 50%, transparent 50%);
}
.tab2:before{
    top:0;
    background: linear-gradient(to right top, yellow 50%, transparent 50%);
}
.tab2--before {
	top: 0;
    background: linear-gradient(to right top, transparent 50%, yellow 50%);
}
.tab2--after {
	bottom: 0;
    background: linear-gradient(to right bottom, transparent 50%, yellow 50%);
}

<div class="header">
  <div class="header__tab tab1">
    <span class="header__tab--left__before tab1--before"></span>
    <span class="header__tab--left__after tab1--after"></span>
    <span>DOCUMENTATION&nbsp;ACCURACY</span>
  </div>
  <div class="header__tab tab2">
    <span class="header__tab--left__before tab2--before"></span>
    <span class="header__tab--left__after tab2--after"></span>
    <span>CODING&nbsp;EFFICIENCY</span>
  </div>
</div>

Web Dev Tip:- Invest a little extra time in the beginning and you will have the most flexible web app in the end which will give you the ability to quickly change the interface according to needs. For ex- In this case, you can easily change the color of the tabs, or the shapes if you no longer like it after a while.

Answer 2

You can simply use Bootstrap img-responsive class

and for alignment you can you the class col-md-2 (upto 12 from 0)

here is one example based on your code :

<div class="col-md-2">
        <a href="#sections2">
            <div id="section2">
                <img class="img-responsive"  src="~/IMG/PNG_transparency_demonstration_1.png" />
                <img class="img-responsive"  src="~/IMG/PNG_transparency_demonstration_1.png" />
            </div>
        </a>
    </div>

Answer 3

add this style in your css

img{width:100%;}

you can get responsive images for all devices.