Html 一个快速响应的封面图片菜单

我可以让它工作，但只要我尝试调整它的大小，以确保它的反应，它的规模非常奇怪。基本上，我需要的图片是他们的自然大小，并排列在旁边没有任何空白。此外，文本需要在中间。 我把它放在一个盒子里，这是一个盒子。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>

---

图像按比例缩放-随着宽度的减小，高度也随之减小（以保持图像的纵横比）。如果希望图像保持高度，可以将它们从html中的

标记更改为css中的

背景图像。e、 g

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.covers类

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

你需要上传你的图片到我们可以看到的地方，目前他们是从你的本地机器采购-除了你没有人可以看到他们！或者使用图像占位符。我知道我知道，只是因为我提供了一个GIF，我才不认为它很重要。你说的图像占位符是什么意思？我永远感激你。
.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;
}

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