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

您的图像按比例缩放 - 当您减小宽度时，高度也会减小（以保持图像的纵横比）。如果您希望图片保持高度，可以将它们从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;
}

Answer 2

尝试更新您的css .covers类

var date = new Date(); //create date object
var year = date.getFullYear(); //get the year from date object

var enteredYear = parseInt("2000"); //get the value from the select

var diff = year - enteredYear;
/* for absolute value use:
var diff = Math.abs(year - enteredYear);
*/

//do something with it!!
alert('The difference is ' + diff + ' years');

响应式封面图片菜单的事情

2 个答案: