缩放图像比例

比方说，我要定位的太阳这个图片缩放图像比例

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对不对？

问题是，如果图像是100×100，我想它适合50×50，它只会裁剪图像的一半

我怎样才能将其缩小比例，并使其适合里面的50x50而不是被裁切掉？

来源

2015-11-28 Francis L.

[developer.mozilla.org - 缩放背景图片]（https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images） – Blag

太阳不是'100 x 100'，但它是'590 x 330' –

你不能让你想要的。你不知道太阳占有多少像素，以减少图像的比例，只有使用CSS是不可能的。 –

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

CSS

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

来源

2015-11-28 16:34:05

可能是你可以使用这样的事情：

.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的伎俩。

来源

2015-11-28 16:36:28

是的，但只有当你知道图像的大小和你需要的点在哪里 –

然而upvote给你:) –

@MarcosPérezGude这是类似于CSS Sprites哥们......':)）' –

缩放图像比例

回答

相关问题