A responsive Cover Image Menu thing - html

Question

I can make it work but as soon as I try resizing it to make sure it's responsive, it scales very weird. Basically, I need the pictures to be their natural size and be lined up next to each other without any white space. Also, the text needs to in the middle.
I put it all in a JSFiddle and here's a GIF. The gif is more important so you can see my problem.
Thanks for your help, I just can't figure this out.
Thank you in advance for your help.
<div class="aktivnostiList">
<div class="spacer">
</div>
<div class="coverRevija">
<img class="covers" src="file:\\C:\Users\andre\Desktop\karolin\web\hr\projekti\revija\revijacover.jpg">
<div id="linkRevija"><h3 id="emphasis">Modna revija</h3></div>
</div>
<div class="spacerSmall"></div>
<div class="coverCajanka">
<img class="covers" src="file:\\C:\Users\andre\Desktop\karolin\web\hr\projekti\cajanka\cajankacover.jpg">
<div id="linkCajanka"><h3 id="emphasis">Čajanka</h3></div>
</div>
<div class="spacerSmall"></div>
<div class="coverIzlozba">
<img class="covers" src="file:\\C:\Users\andre\Desktop\karolin\web\hr\projekti\izlozba\izlozbacover.jpg">
<div id="linkIzlozba"><h3 id="emphasis">Izložba</h3></div>
</div>
.aktivnostiIntro{
width: 75%;
height: auto;
margin: auto;
margin-top: 100px;
text-align: center;
}
.covers{
width: 100%;
position: absolute;
z-index: -1;
left: 0;
}
.aktivnostiList{
text-align: center;
}
.coverRevija{
line-height: 227px;
}
.coverCajanka{
line-height: 227px;
}
.coverIzlozba{
line-height: 227px;
}

Answer 1

Your images are scaling proportionately - as you reduce the width, the height is reducing too (to maintain the image's aspect ratio). If you want the images to keep their height, you could change them from <img> tags in the html to background-images in the css. e.g. https://jsfiddle.net/9rgk6nuo/7/
HTML
<div class="aktivnostiList">
<div class="spacer">
</div>
<div class="covers-wrapper coverRevija">
<div id="linkRevija"><h3 id="emphasis">Modna revija</h3></div>
</div>
<div class="spacerSmall"></div>
<div class="covers-wrapper coverCajanka">
<div id="linkCajanka"><h3 id="emphasis">Čajanka</h3></div>
</div>
<div class="spacerSmall"></div>
<div class="covers-wrapper coverIzlozba">
<div id="linkIzlozba"><h3 id="emphasis">Izložba</h3></div>
</div>
</div>
CSS
.aktivnostiIntro{
width: 75%;
height: auto;
margin: auto;
margin-top: 100px;
text-align: center;
}
.covers-wrapper {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.aktivnostiList{
text-align: center;
}
.coverRevija{
background-image: url('http://placehold.it/1200x300'); //change this to your image source
line-height: 227px;
}
.coverCajanka{
background-image: url('http://placehold.it/1200x300'); //change this to your image source
line-height: 227px;
}
.coverIzlozba{
background-image: url('http://placehold.it/1200x300'); //change this to your image source
line-height: 227px;
}

Answer 2

Try this update your css .covers class
` .covers{
min-width: 100%;
height:100%;
position: absolute;
z-index: -1;
left: 0;
}`