Hvordan gjøre bilde responsivt i lengde OG høyde?

[Web11]

Hei igjen,

Prøver meg på en nettside til meg selv nå, men lurer på en ting. Hvordan kan man gjøre et bilde responsivt i lengde OG høyde, slik at når man kommer til siden med hvilken som helst skjerm, at bildet dekker hele området. Et eksempel kan finnes her: degea1.com. Takker for hjelp!

 

[Bjørnar]

style="width: 100%; height: 100%;" pleier vel å være en dirty og fin fiks.

<img src="image.png" style="width: 100%; height: 100%;" alt="blabla">

 

[Web11]

Ja, men da går det an å rulle bildet, at det fortsetter nedover der man ikke ser også. Det jeg ønsker er at det ikke skal gå an å rulle på siden som på degea1.com.

 

[Apputvikleren]

HTML:

<div class="container">
    <!-- Innholdet ditt her -->
</div>

CSS:

.container {
    width: 100%;
    height: 100vh;
    background: url('https://download.unsplash.com/photo-1432836431433-925d3cc0a5cd');
    background-size: cover;
    background-position: center;
}

https://jsfiddle.net/sxg29e4f/embedded/result/

 

[Web11]

Takk for den Apputvikleren

 

[spikre]

Ja, men da går det an å rulle bildet, at det fortsetter nedover der man ikke ser også. Det jeg ønsker er at det ikke skal gå an å rulle på siden som på degea1.com.

Overflow: hidden;