Pełna wersja: [CSS]Zdjęcie na cały ekran
Mam do zrobienia stronę wyświetlającą zdjęcie. W pewnej firmie są monitory na korytarzach, chcą na tych monitorach wyświetlać jakieś zdjęcia. Samo wyświetlanie jest nietypowe, bo przeglądarka działa w trybie fullscreen i zdjęcie ma wypełniać cały ekran. Bez obcinania i bez zachowania proporcji. Po prostu ma się dopasować w pionie i w poziomie do monitora. Na razie zrobiłem workaround dla kilku monitorów i wyświetlam zdjęcie ze sztywnymi wymiarami w pikselach. Akurat te monitory są takie same i to nie problem, ale są też inne monitory i nie może być sztywnych wymiarów. Jak to ugryźć?
Może background-size: cover?
Bez zachowania proporcji:
Kod
html,body{
height:100%;
}
img{
width:100%;
height:100%;
}
<body><img src="...."/></body>
height:100%;
}
img{
width:100%;
height:100%;
}
<body><img src="...."/></body>
Cytat(kapslokk @ 10.08.2016, 09:42:15 ) 
Może background-size: cover?
Jeśli background to raczej background-size: 100% 100%
I pewnie tak zrobię.
Cytat(trueblue @ 10.08.2016, 09:45:45 )
Bez zachowania proporcji:
Kod
html,body{
height:100%;
}
img{
width:100%;
height:100%;
}
<body><img src="...."/></body>
height:100%;
}
img{
width:100%;
height:100%;
}
<body><img src="...."/></body>
Jeśli tak to trzeba dodać do html,body margin: 0; bo przez marginesy zostaje suwak.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.