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&width=800&height=634&quality=80&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2F4OkKyyIXmBUpDRJ6q93WKw%2Fnormalized.jpg" srcset="https://d7hftxdivxxvm.cloudfront.net?resize_to=fit&width=800&height=634&quality=80&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2F4OkKyyIXmBUpDRJ6q93WKw%2Fnormalized.jpg 1x, https://d7hftxdivxxvm.cloudfront.net?resize_to=fit&width=1600&height=1268&quality=50&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%);
}