• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Obliczanie proporcji

0 głosów
74 wizyt
pytanie zadane 25 maja w JavaScript przez mikey Użytkownik (800 p.)
Cześć, takie nietypowe pytanie.

Nie wiem jak obliczyć proporcje obrazka tak aby zachowywał się tak jak tutaj https://www.artsy.net/artwork/zhang-huan-skull-no-7 (chodzi o to jak się kliknie "view in room" pod obrazkiem i tutaj np obraz ma 280cm ławka 8ft czyli jakieś 243cm i teraz nie wiem jak w js obliczyć proporcję obrazka tak aby automatycznie skalował się w zależności od rozmiaru obrazka. Jakieś rady, wzór do podstawienia. Zastanawiałem się czy w pierwszej kolejności nie zamienić cm na px
komentarz 25 maja przez mikey Użytkownik (800 p.)
ewentualnie może są do tego jakieś biblioteki których nie znam

1 odpowiedź

+1 głos
odpowiedź 25 maja przez VBService Mędrzec (185,660 p.)
edycja 25 maja przez VBService

Moim zdaniem podany rozmiar ławki ma wskazać na rzeczywisty rozmiar obrazu fizycznego, który można zawiesić na ścianie, bo jest to strona galerii, która zajmuje się sprzedażą wielkogabarytowych obrazów (chyba, że się mylę), chodzi o efekt uzmysłowienia sobie prawdziwego fizycznego rozmiaru, coś podobnego do sytuacji, gdy ekspert kryminologii fotografując ślady na miejscu zbrodni używa "specjalnej" miarki

z powyższego zdjęcia ciężko by było określić wielkość pudełka od papierosów (nawet przeliczając piksele obrazka), miarka posiada kwadraty o wielkości 1cm x 1cm (czarny, biały itd.) z czego można wnioskować, że pudełko ma wysokość ok 10cm.

 

Wracając do przedstawionego w linku obrazka to ma on takie "parametry"

więc obliczanie w cm czegokolwiek na ekranie komputera będzie bardzo "nie wygodne", bardziej naturalne jest używanie pixel-i itp.

W dobie css-a podobny efekt można uzyskać bez angażowania javascript (choć też można).

przykład

<p>Kliknij w obrazek</p>
<input type="checkbox" id="click">
<label for="click">
  <img src="https://d7hftxdivxxvm.cloudfront.net?resize_to=fit&amp;width=800&amp;height=634&amp;quality=80&amp;src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2F4OkKyyIXmBUpDRJ6q93WKw%2Fnormalized.jpg" srcset="https://d7hftxdivxxvm.cloudfront.net?resize_to=fit&amp;width=800&amp;height=634&amp;quality=80&amp;src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2F4OkKyyIXmBUpDRJ6q93WKw%2Fnormalized.jpg 1x, https://d7hftxdivxxvm.cloudfront.net?resize_to=fit&amp;width=1600&amp;height=1268&amp;quality=50&amp;src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2F4OkKyyIXmBUpDRJ6q93WKw%2Fnormalized.jpg 2x" alt="Zhang Huan, ‘Skull No. 7’, 2007, Painting, Ashes on canvas, Max Lang ">
</label>
img {
  cursor: pointer;
  transition: all 1s;
}
input[type="checkbox"]  {
  display: none;
}
input[type="checkbox"]:checked + label img {
  transform: scale(0.6) translate(50%,-25%);
}

 

komentarz 25 maja przez mikey Użytkownik (800 p.)
transform ok ale zauważ że tutaj chodzi o coś trochę innego

1. Proporcja obrazka jest zależna od szerokości tej ławki

2. Wszystko się odpowiednio skaluje dla każdej szerokosci
komentarz 25 maja przez VBService Mędrzec (185,660 p.)
edycja 25 maja przez VBService

wink

<input type="checkbox" id="click">
<label for="click">
  <img src="https://picsum.photos/1000/800/?random=1">
</label>
<div class="room"></div>
body {
  overflow: hidden;
}
.room {
  position: absolute;
  bottom: -10vh;
  width: 100vw;
  height: 40vh;
  background-image: url('https://files.artsy.net/images/room.jpeg');
  background-position: center top;
  opacity: 0;
  transition: opacity 2s 1.4s;
}
label {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 99;
}
img {
  cursor: pointer;
  transition: all 2s cubic-bezier(1, -1, 1, 1.5);
}
input[type="checkbox"]  {
  display: none;
}
input[type="checkbox"]:checked + label img {
  transform: scale(0.8, 0.6) translate(0,-20%);
}
input[type="checkbox"]:checked ~ .room {
  opacity: 1;
}
input[type="checkbox"]:not(:checked) ~ .room {
  transition: opacity 1s 1.5s;
}

 

komentarz 25 maja przez mikey Użytkownik (800 p.)
raczej o to chodzi tylko nie rozumiem tego na tyle aby rozbudować ten skrypt.

Docelowo chodzi o odpowiednie przeskalowanie tzn (już bez zamiany na px) ławka ma 200 cm obrazek 80cm jest odpowiednio mniejszy, ławka 200 i obrazek 200 są równo. Dodatkowo tam jest coś takiego że na mobile odpowiednio się to skaluje tzn obrazek nie nachodzi na ławkę ale nie jest też mniejszany - znaczy jest ale razem z zdjęciem w tle
komentarz 26 maja przez VBService Mędrzec (185,660 p.)

Może to będzie pomocne:  Resize image with javascript canvas (smoothly)

Podobne pytania

0 głosów
1 odpowiedź 202 wizyt
pytanie zadane 12 sierpnia 2020 w HTML i CSS przez Kacper000 Początkujący (360 p.)
0 głosów
0 odpowiedzi 71 wizyt
pytanie zadane 1 maja 2018 w JavaScript przez Kazuhiro Użytkownik (910 p.)
0 głosów
2 odpowiedzi 111 wizyt
pytanie zadane 31 marca 2020 w Matematyka, fizyka, logika przez ED_STEALTH Nowicjusz (160 p.)

89,082 zapytań

137,670 odpowiedzi

307,610 komentarzy

59,140 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...