一個響應式封面圖片菜單的東西

我可以使它的工作，但只要我嘗試調整它的大小，以確保它的響應能力，它縮放非常奇怪。基本上，我需要的照片是他們的自然大小，並排列在一起，沒有任何空白。此外，文字需要在中間。一個響應式封面圖片菜單的東西

我把它全部放在JSFiddle這裏是一個GIF。 gif更重要，所以你可以看到我的問題。

感謝您的幫助，我無法弄清楚這一點。

非常感謝您的幫助。

<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; 
}

來源

2017-07-19 Andy

您需要將圖片上傳到的地方，我們可以看到他們，銅他們正在從本地機器採購 - 除了你以外，沒有人能看到它們！ – Liam

或使用圖像佔位符。 – sol

我知道我知道，我只是不認爲它很重要，因爲我提供了一個gif。儘管圖像佔位符是什麼意思？ – Andy

你

圖像被按比例縮放 - 選擇減少的寬度，高度減少太（以保持圖像的縱橫比）。如果您希望圖片保持其高度，可以將它們從html中的<img>標籤更改爲css中的background-images。例如

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; 
}

來源

2017-07-19 13:48:30

我永遠感激。 – Andy

試試這個更新你的CSS .covers類

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

來源

2017-07-19 13:49:20

一個響應式封面圖片菜單的東西

回答

相關問題