[J.....L]

#webdev #naukaprogramowania #frontend udało mi się zrobić wstępnie jakiś layout na stronie. W tle jest obrazek 1000x600 px, dany jako img. Na przeglądarce w komputerze wszystko chodzi jak marzenie, niestety ale z niewiadomych przyczyn w momencie otworzenia strony na przeglądarce w Smartphonie wszystko się wykrzacza . Zastanawiam się gdzie może leżeć przyczyna i jakie będzie rozwiązanie tego problemu.

1. czy po prostu trzeba będzie dać oddzielne @media_query z obrazkiem o innej rozdzielczości na ekrany poniżej określonej szerokości wyświetlania ?
2. a może stylowanie obrazków atrybutami : width: 100% , height: 100vh nie działa na przeglądarkach mobilnych tak jak na urzadzeniach stacjonarnych ?

tu jest link do strony wrzuconej na próbę na darmową domenę : http://yellowmellow.cba.pl/

a tutaj codepen : https://codepen.io/anon/pen/EqabBX

[laki1]

@JungleJamPL: Co masz na mysli pisząc 'wykrzacza'? to że banner od cba ci rozciąga stronę?

[Thunderbolt]

@JungleJamPL: chodzi o takie 'spłaszczanie' zdjęcia na mobile?

[gammie]

@Thunderbolt: spróbuj dodać obrazek w css i daj background-size: cover;

[J.....L]

@laki1: @Thunderbolt: @gammie:

[J.....L]

@laki1: @Thunderbolt: @gammie: pojawia się po prostu taka wolna przestrzeń po prawej stronie jak robi się zoom out. ale to może być kwestia hostingu spróbuję to na innym hostingu zrobić i zobaczę dopiero

[RolnikSamWdolinie]

@JungleJamPL: object-fit:cover

[laki1]

@JungleJamPL: tak jak pisałem, pojawia się ze względu na ten banner od cba. Zmień hosting

[CeZiK_]

@JungleJamPL: wrzuć stronę na ct8.pl lub GitHub Pages.

[techko]

1. czy po prostu trzeba będzie dać oddzielne @media_query z obrazkiem o innej rozdzielczości na ekrany poniżej określonej szerokości wyświetlania ?

jest cos takiego jak srcset, ale w twoim wypadku po pierwsze - jesli uzywasz obrazkow jako tla to uzywaj background-image, a po drugie jesli z jakiegos powodu musisz to miec jako element - object-fit:cover; dla zachowania image ratio (nie dziala na ie, musisz dorzucic polyfill)

2. a może stylowanie obrazków