I'm making a slide in full screen, but I find that in other monitors the image and the text gets larger / smaller. I would like to make it one size fits all.
I saw this site below, I found it very interesting. It is noticed that even increasing / decreasing the zoom the texts and image remain fixed.
Does anyone have a suggestion for me?
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 cause the image to take up the entire width of the screen, the height 100vh, will cause it to be caught the whole height of the screen, regardless of the size, 100vh, are 100 points of the screen, if in doubt about vh >.
Background-size cover will make the image fit the inserted size, background position center will keep it in the middle of the screen and background-repeat will cause the image not to repeat, to be displayed only once.Remembering that the image should be in the background, eg:
<div class="imagem" style="background-image: url(localimagem/imagem.jpg);"></div>