CSS Sprites với Dynamic Sizing

Question

Tôi đã quyết định vẽ một trang ma cho toàn bộ trang web của tôi (+ -30 hình ảnh) để tôi có thể tải 1 hình ảnh và chỉ tham khảo các vị trí, làm giảm thời gian tải hình ảnh và các cuộc gọi máy chủ.

Câu hỏi của tôi: Có thể tham chiếu hình ảnh trong trang ma trận và sau đó định kích thước hình ảnh đó với 100% vùng chứa mẹ của nó không?

Vì vậy Ví dụ:

#SomeDiv 
{ 
    background: url("/Content/Images/SpriteSheet.png") -125px 0 no-repeat; 
    width:100px; 
} 

Chiều rộng của div của tôi là 100px, nhưng sprite Tôi muốn tham khảo là 20px (ví dụ) - làm thế nào tôi có thể streth sprite chiết xuất sẽ tăng lên 100px?

Trân trọng, Byron Cobb.

Answer 1

Vâng, nếu bạn thực sự muốn có câu trả lời, chắc chắn, tại sao không. Xem: http://jsfiddle.net/3dsgn/3/

Về cơ bản, chúng tôi đang làm việc với CSS3 tại đây, vì vậy hỗ trợ của IE (ngoại trừ 9) không tồn tại. Bạn cũng sẽ phải sử dụng phiên bản có phần mở rộng -moz- dành cho Firefox 3.6 trở xuống. Bản thân kỹ thuật cũng hơi rắc rối. Bạn thực sự phải tự tính số liệu - phần trăm sẽ không hoạt động, một cách tự nhiên.

#sprite-large { 

    /* All of these numbers are 2x their normal, 
     though tweaked slightly so that they will look okay */ 
    width: 36px; 
    height: 36px; 
    background: url('url/to/your/image.png') -38px -112px; 

    -moz-background-size: 448px 368px; 
    background-size: 448px 368px; 
}