Obliczanie proporcji

Question

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

Comments

ewentualnie może są do tego jakieś biblioteki których nie znam

Answer 1

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%);
}

 

Comments

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

---

<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;
}

 

---

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

---

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