Home / Questions / 125218
Accepted
Pedro
Asked: 2020-12-16 18:37:57 +0800 CST 2020-12-16 18:37:57 +0800 CST

Cannot fit a style to an image with smaller resolutions

  • 772

I found a design of some stars here . How to create three stars plus one middle star without :hover?

I'm using the same design, only the smaller stars, when changing the image to smaller ones, the design has been messed up despite having changed the values, I can't get it to be ordered correctly.

What value should I change so that it adapts in the same way as that design, only that the stars are smaller.

.c-rating {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.c-rating__item {
    -webkit-box-flex: 0;
     -webkit-flex: 0 0 12px;
    -ms-flex: 0 0 12px; 
    flex: 0 0 12px;
    height: 18px;
    background-position: -10px 0px;
    background-image: url(http://svgshare.com/i/4U0.svg);
    cursor: pointer;
}
.c-rating__item.left {
    background-position: 0px 0px;
}
.c-rating__item.is-active,
.c-rating__item:before {
    background-position: -33px 0;
}
.c-rating__item.left.is-active,
.c-rating__item.left:before {
    background-position: -21px 0;
}
<ul class="c-rating">
  <li class="c-rating__item is-active left" data-index="0"></li>
  <li class="c-rating__item is-active" data-index="1"></li>
  <li class="c-rating__item is-active left" data-index="2"></li>
  <li class="c-rating__item is-active" data-index="3"></li>
  <li class="c-rating__item is-active left" data-index="4"></li>
  <li class="c-rating__item is-active" data-index="5"></li>
  <li class="c-rating__item is-active left" data-index="6"></li>
  <li class="c-rating__item" data-index="7"></li>
  <li class="c-rating__item left" data-index="8"></li>
  <li class="c-rating__item" data-index="9"></li>
</ul>

html

1 Answers

  1. Best Answer

    Good friend, use the css property transform:scale()and pass a number from 0one to one, making the stars smaller without losing the shape

    Example:

    transform:scale(0.6)

    functional example

    NOTE: for the example add the styles directly in the html. and add various sizes but you can choose the one that suits you best.

    works with any image and DOM element and is supported by all browsers but you have to use the respective prefix like -mozor -webkitbetween other

    .c-rating {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    
}

.c-rating__item {
    -webkit-box-flex: 0;
     -webkit-flex: 0 0 12px;
    -ms-flex: 0 0 12px; 
    flex: 0 0 12px;
    height: 24px;
    background-position: -12px 0px;
    background-image: url(http://svgshare.com/i/3KS.svg);
    cursor: pointer;
}
.c-rating__item.left {
    background-position: 0px 0px;
}
.c-rating__item.is-active,
.c-rating__item:hover {
    background-position: -36px 0;
}
.c-rating__item.left.is-active,
.c-rating__item.left:hover {
    background-position: -24px 0;
}
    <ul class="c-rating" style="transform:scale(0.9)">
  <li class="c-rating__item is-active left" data-index="0"></li>
  <li class="c-rating__item is-active" data-index="1"></li>
  <li class="c-rating__item is-active left" data-index="2"></li>
  <li class="c-rating__item is-active" data-index="3"></li>
  <li class="c-rating__item is-active left" data-index="4"></li>
  <li class="c-rating__item is-active" data-index="5"></li>
  <li class="c-rating__item is-active left" data-index="6"></li>
  <li class="c-rating__item" data-index="7"></li>
  <li class="c-rating__item left" data-index="8"></li>
  <li class="c-rating__item" data-index="9"></li>
</ul>
<ul class="c-rating" style="transform:scale(0.8)">
  <li class="c-rating__item is-active left" data-index="0"></li>
  <li class="c-rating__item is-active" data-index="1"></li>
  <li class="c-rating__item is-active left" data-index="2"></li>
  <li class="c-rating__item is-active" data-index="3"></li>
  <li class="c-rating__item is-active left" data-index="4"></li>
  <li class="c-rating__item is-active" data-index="5"></li>
  <li class="c-rating__item is-active left" data-index="6"></li>
  <li class="c-rating__item" data-index="7"></li>
  <li class="c-rating__item left" data-index="8"></li>
  <li class="c-rating__item" data-index="9"></li>
</ul>
<ul class="c-rating" style="transform:scale(0.7)">
  <li class="c-rating__item is-active left" data-index="0"></li>
  <li class="c-rating__item is-active" data-index="1"></li>
  <li class="c-rating__item is-active left" data-index="2"></li>
  <li class="c-rating__item is-active" data-index="3"></li>
  <li class="c-rating__item is-active left" data-index="4"></li>
  <li class="c-rating__item is-active" data-index="5"></li>
  <li class="c-rating__item is-active left" data-index="6"></li>
  <li class="c-rating__item" data-index="7"></li>
  <li class="c-rating__item left" data-index="8"></li>
  <li class="c-rating__item" data-index="9"></li>
</ul>
<ul class="c-rating" style="transform:scale(0.6)">
  <li class="c-rating__item is-active left" data-index="0"></li>
  <li class="c-rating__item is-active" data-index="1"></li>
  <li class="c-rating__item is-active left" data-index="2"></li>
  <li class="c-rating__item is-active" data-index="3"></li>
  <li class="c-rating__item is-active left" data-index="4"></li>
  <li class="c-rating__item is-active" data-index="5"></li>
  <li class="c-rating__item is-active left" data-index="6"></li>
  <li class="c-rating__item" data-index="7"></li>
  <li class="c-rating__item left" data-index="8"></li>
  <li class="c-rating__item" data-index="9"></li>
</ul>
<ul class="c-rating" style="transform:scale(0.5)">
  <li class="c-rating__item is-active left" data-index="0"></li>
  <li class="c-rating__item is-active" data-index="1"></li>
  <li class="c-rating__item is-active left" data-index="2"></li>
  <li class="c-rating__item is-active" data-index="3"></li>
  <li class="c-rating__item is-active left" data-index="4"></li>
  <li class="c-rating__item is-active" data-index="5"></li>
  <li class="c-rating__item is-active left" data-index="6"></li>
  <li class="c-rating__item" data-index="7"></li>
  <li class="c-rating__item left" data-index="8"></li>
  <li class="c-rating__item" data-index="9"></li>
</ul>

    • 2