它们如何代表普通电影对imdb，烂番茄的评级？

Question

Alright lets say the average rating of a movie/restaurant is 4.3. On the show page you have the name of the object, the description, the contact, images etc etc... then you have the average rating represented in stars. In the object's model you store the rating from every user and with simple mathematical formula you calculate the average. But what I am curious about is how do they represent 4.3 which is 4 stars and a little bit less than 4.5? Isn't it too much to have stored 50 png images? Thanks in advance.

Answer 1

It's actually much simpler than it seems. Imagine two elements, stacked on top of one another:

1. A row of gold stars
2. A row of gray stars

Then, with a simple image mask you can calculate in js the relative width of the golden star layer.

In greater detail, they actually use a sprite as the very basis:

Play with the width values and you'll see the full effect:

document.querySelector(".one .gold").style.width = "83.5%";
document.querySelector(".two .gold").style.width = "56%";

div{position:relative;height:12px;margin-bottom:10px;width: 140px;
    background:url('http://ia.media-imdb.com/images/G/01/imdb/images/rating/rating-list/sprite-1445387679._V_.png')0 -28px;
}

span{
  position: absolute;
  top: 0;
  left: 0;
  height: 12px;
  background-image: url('http://ia.media-imdb.com/images/G/01/imdb/images/rating/rating-list/sprite-1445387679._V_.png');
}

.gold{background-position: 0 -42px;}

<div class="one">
  <span class="gold"></span>
</div>

<div class="two">
  <span class="gold"></span>
</div>

</div>