按比例缩放图像

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的画布 我从顶部有一个50px的资产，从左边有0 为了定位它，我会做一个背景位置：0px 50px对吗？

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

如何按比例缩小比例并使其在50x50内适应而不被裁剪？

Answer 1

可能你可以使用这样的东西：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

预览

保持background-size: 300px可以解决问题。

Answer 2

试试这个https://jsfiddle.net/2Lzo9vfc/203/

CSS

foo.save