html - 响应式封面图片菜单

Question

我可以让它工作，但是当我尝试调整它的大小以确保它具有响应性时，它的缩放比例非常奇怪。基本上，我需要这些图片是它们的自然大小，并且彼此相邻排列，没有任何空白。此外，文本需要在中间。

我把它全部放在一个 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;
}

Answer 1

您的图像按比例缩放 - 当您减小宽度时，高度也会减小(以保持图像的纵横比)。如果您希望图像保持高度，您可以将它们从 <img> 更改为html 中的标记为 background-images在CSS中。例如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;
}