使用CSS控制DOM中的精灵大小。

精灵：

我做了以下，它看起来很棒，但…我不希望显示400px的宽度，我希望它包含在另一个250px的img中。有没有办法（我已经尝试了很多方法）用CSS控制精灵的大小，或者我需要一个js解决方案

.portfolio a .icon1  {
    width: 400px;
    height: 250px;
    background: url('../images/gate-sprite.png') 0 0;
    background-repeat: no-repeat;
}

.portfolio a:hover .icon1 {
    width: 400px;
    height: 250px;
    background: url('../images/gate-sprite.png') 0 -250px;
    background-repeat: no-repeat;
}

---

使用：：before或：：after伪元素来包含图标。这样可以设置图标大小，并为：：before或：：after元素指定背景图像

例如：

.portfolio a .icon1::before  {
    content: "";
    display: inline-block;
    width: 400px;
    height: 250px;
    background: url('../images/gate-sprite.png') 0 0;
    background-repeat: no-repeat;
} 

有关：之前和之后的详细信息，请单击此处：

---

你能这样做吗？不是另一个img，而是一个将精灵大小限制在250像素的容器。