make icons from sprite equall size (width and height)

I want to scale icon from sprite to same size, in sprite they are different. like icon-A is 48x48, icon-B is 60x60, and icon-C is 70x70. now i want to display all these 3 to 48x48. is that possible? using Css or html trick. i tried

transform: scale(0.6);
transform-origin:0 0;

<div style="display: inline-block;background-image:url('sprite.png');background-repeat: no-repeat;background-position: -385px -4px;height: 48px;width: 48px;transform: scale(0.6);transform-origin:0 0;"></div>

plz check i added my code: http://jsfiddle.net/ut4mo0c8/6/

Answers


I have roughly calculated the style for the second image

element.style {
    display: inline-block;
    background-image: url('https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2014/03/1-giant.png');
    background-repeat: no-repeat;
    background-position: -15px -316px;
    height: 40px;
    width: 40px;
    background-size: 511px 628px;
}

Your image is really 591 x 769 px. By setting the background-size smaller, you are scaling it down.

The tricky thing is that then you need to recalculate the background-position

fiddle


Need Your Help

Store timestamps with timezone in rails 3.2

ruby-on-rails ruby ruby-on-rails-3 postgresql activerecord

I'm trying to store all timestamps in a rails application with their included timezone. I'm fine with ActiveRecord converting them to utc, but I have multiple applications hitting the same database...