Hej, jak można zrobić coś takiego jak mają galerie sztuki np https://www.artsy.net/artwork/zhang-huan-skull-no-7 chodzi o przycisk zobacz w pomieszczeniu/na ściania.
Chodzi mi dokładnie o to na jakiej podstawie jest to skalowane
0
4
Myślałem że chodzi o jakieś AR a to zwykły obrazek na obrazku. Normalnie - znając rozmiar obrazu i wymiary ściany na zdjęciu, wystarczy liniowo policzyć proporcje. A tak naprawdę możesz to wlepić byle jak bo user nie zna wymiarów ściany ani ławeczki.
0
Tam są chyba proporcje liczone względem tej ławki, jest tam info że ławka ma 8 stóp
3
No ale teraz to się kłania matematyka z zakresu końca podstawówki i obliczanie proporcji :P Skoro wiesz ile ma obraz oraz że ławka ma 8 stóp (swoją drogą - co za dzikusy, żeby długość mierzyć w czymś innym niż metry) to nie powinno być większym problemem przeskalowanie obrazka. Ewentualnie napisz konkretnie, czego nie rozumiesz/z czym masz problem.
0
Dzięki, dałem radę ogarnąć :)
0
Mam jeszcze jedno pytanie w tym wątku. Udało mi się ogarnąć odpowiednie zmniejszanie/powiększanie obrazka względem ławki jednak w tym linku który podałem https://www.artsy.net/artwork/zhang-huan-skull-no-7 wszystko ładnie się skaluje. Chodzi o to że wraz z zmianą rozdzielczości ekranu czy to na desktop czy mobile zdjęcie które jest w tle odpowiednio zmniejsza się wraz z obrazkiem na ścianie przez co zawsze to dobrze wygląda. Jak to ogarnąć? Podejrzewam że należy użyć css jednak nie mam pojęcia czego dokładnie
1
Poczytaj o RWD, use FlexBox
1
michalos25 napisał(a):
Mam jeszcze jedno pytanie w tym wątku. Udało mi się ogarnąć odpowiednie zmniejszanie/powiększanie obrazka względem ławki jednak w tym linku który podałem https://www.artsy.net/artwork/zhang-huan-skull-no-7 wszystko ładnie się skaluje. Chodzi o to że wraz z zmianą rozdzielczości ekranu czy to na desktop czy mobile zdjęcie które jest w tle odpowiednio zmniejsza się wraz z obrazkiem na ścianie przez co zawsze to dobrze wygląda. Jak to ogarnąć? Podejrzewam że należy użyć css jednak nie mam pojęcia czego dokładnie
@michalos25: Nie pamiętam w czym to wszystko robisz i przyznam (sory), że już nie chce mi się czytać postów wcześniej, ale !!
To taki może przykład fotki backgroundowej zrobionej w css tak, że wypełnia ci cały ekran niezależnie od tego jak
duży jest (FHD, UHD czy smart).
img {
position: fixed;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
}
#some_div {
width:200px;
min-height: 100px;
background-color: rgba(22,22,22,0.4);
z-index: 2;
}
W ten sposób masz responsywną (dopasowującą się do każdego screenu) fotkę backgroundową i
oprócz tego lekko transparentnego diva na tle tej fotki. I bardzo ważna jest właściwość "object-fit: cover", bo
dzięki niej twój "background" dopasowuje się idealnie do mniejszych ekranów.