Ein reaktionsfähiges Cover Image Menü Sache

Question

Ich kann es funktionieren lassen, aber sobald ich versuche, die Größe zu ändern, um sicherzustellen, dass es reagiert, skaliert es sehr seltsam. Im Grunde brauche ich die Bilder, um ihre natürliche Größe zu sein und nebeneinander ohne weißen Zwischenraum aufgereiht zu sein. Außerdem muss der Text in der Mitte stehen.

Ich lege alles in eine JSFiddle und hier ist eine GIF. Das Gif ist wichtiger, damit Sie mein Problem sehen können.

Danke für Ihre Hilfe, ich kann das nicht herausfinden.

Vielen Dank im Voraus für Ihre Hilfe.

<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"><a href="#">Modna revija</a></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"><a href="#">Čajanka</a></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"><a href="#">Izložba</a></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

Ihre Bilder werden Skalierung proportional - wie Sie die Breite zu verringern, wird die Höhe zu reduzieren (auf das Seitenverhältnis des Bildes beibehalten). Wenn Sie möchten, dass die Bilder ihre Höhe behalten, könnten Sie sie von Tags in der HTML zu background-images in der CSS ändern. z.B. https://jsfiddle.net/9rgk6nuo/7/

HTML

<div class="aktivnostiList"> 

    <div class="spacer"> 
    </div> 

     <div class="covers-wrapper coverRevija"> 
      <div id="linkRevija"><h3 id="emphasis"><a href="#">Modna revija</a></h3></div> 
     </div> 

     <div class="spacerSmall"></div> 

     <div class="covers-wrapper coverCajanka"> 
      <div id="linkCajanka"><h3 id="emphasis"><a href="#">Čajanka</a></h3></div> 
     </div> 

     <div class="spacerSmall"></div> 

     <div class="covers-wrapper coverIzlozba"> 
      <div id="linkIzlozba"><h3 id="emphasis"><a href="#">Izložba</a></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

versuchen, dieses Update Ihre CSS .covers Klasse

` .covers{ 
     min-width: 100%; 
     height:100%; 
     position: absolute; 
     z-index: -1; 
     left: 0; 
    }`