我正在创建一个头像列表供我的用户在我的网站上选择。化身是一个大图像，每行5个子图像，每列5个子图像。因此，通过使用图像背景位置，我可以显示25种可能的选择之一。例如，我的子图像大小是160X160，我想显示第3行第2列.css将是
<img class="avatar-icon img-thumbnail" style="background-position: -160px -320px; background-image: url('/images/logos/Avatar_0.png')">
效果很好。然后我发现在某些情况下头像有点大。我想在定位后拉伸背景。在上面的例子中，我仍然希望从（-160px，-320px）到（-320px，-480px）的区域显示。但是我想将它拉伸到50％，所以图像尺寸将是80x80。我尝试了背景参数，但没有找到一个好的组合。有没有一种方法可以做到这一点？ （没有将大图像复制到50％的小图像）
答案 0 :(得分：0)
使用<div>或<span>作为背景属性，而不是应用于图片代码。
您可以通过两种方式实现头像缩放：
1）通过缩放位置参数和图像尺寸，即
background-position: -80px -160px; background-size: 50% auto;。
2）如果您不想更改位置参数，可以使用transform属性进行缩放
transform: scale(0.5);