html - 按比例缩放图像

Question

假设我想在这张图片中瞄准太阳

http://www.geek.com/wp-content/uploads/2013/08/planets-590x330.jpg

#graphic .image {
    position: absolute; 
    background: url("http://www.geek.com/wp-content/uploads/2013/08/planets-590x330.jpg")
    }
#graphic #sun {
    background-position: 0px 0px;
}
.image {
    width: 50px;
    height: 50px;
}

<div id="graphic">
  <div class="image" id="sun"></div>
  </div>

假设我有一张 500 x 500 的 Canvas 我有一个距顶部 50px，距左侧 0 像素的 Assets 为了定位它，我会做一个 background-position: 0px 50px 对吗？

问题是如果图像是 100x100，我希望它适合 50x50，它只会裁剪图像的一半

我怎样才能按比例缩小它并使其适合 50x50 而不会被裁剪掉？

Answer 1

也许你可以使用这样的东西:

.box {
  height: 50px;
  width: 50px;
  background: url('http://www.geek.com/wp-content/uploads/2013/08/planets-590x330.jpg');
  -webkit-background-size: 300px;
  background-size: 300px;
}

<div class="box"></div>

预览

保持 background-size: 300px 就可以了。