一个响应式封面图片菜单的东西

我可以使它的工作，但只要我尝试调整它的大小，以确保它的响应能力，它缩放非常奇怪。基本上，我需要的照片是他们的自然大小，并排列在一起，没有任何空白。此外，文字需要在中间。一个响应式封面图片菜单的东西

我把它全部放在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

一个响应式封面图片菜单的东西

回答

相关问题