Slide JQUERY 100% screen EXAMPLE

Asked

Viewed 201 times

-2

I’m doing a full screen slide, but I find that in other monitors the image and the text gets bigger/smaller. I’d like to leave him one size fits all.

Vi this site below, I found it very interesting. It is noticed that even increasing/decreasing the zoom texts and image remain fixed.

Someone has a suggestion for me?

jquery html css

  • This is an e-learning. It looks like it was done in Edge, Articulate or Captivate.

1 answer

0

Play the following css in the image div:

.imagem{
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

Width 100% will make the image take the entire width of the screen, the height 100vh, will make it will be caught the entire height of the screen, regardless of size, 100vh, are 100 points of the screen, if you have questions about vh Click here.

Background-size cover will make the image fit the inserted size, background position center will keep it in the middle of the screen and the background-repeat will make the image not repeat, is displayed only once.

Remembering that the image should be in the background, example:

<div class="imagem" style="background-image: url(localimagem/imagem.jpg);"></div>

Browser other questions tagged jquery html css

You are not signed in. Login or sign up in order to post.