响应式封面图像菜单答案

【问题标题】：A responsive Cover Image Menu thing响应式封面图像菜单
【发布时间】：2017-07-19 21:54:07
【问题描述】：

我可以让它工作，但是一旦我尝试调整它的大小以确保它具有响应性，它的缩放就非常奇怪。基本上，我需要图片是它们的自然尺寸，并排成一排，没有任何空白。此外，文本需要在中间。

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

【问题讨论】：

你需要把你的图片上传到我们可以看到的地方，目前它们是从你的本地机器上获取的——除了你之外没有人能看到它们！
或者使用图片占位符。
我知道我知道，我只是不认为这很重要，因为我提供了一个 gif。图像占位符是什么意思？

标签： html css image responsive-design

【解决方案1】：

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

【讨论】：

我永远感激不尽。

【解决方案2】：

试试这个更新你的 css .covers 类

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

【讨论】：