Извлечение и масштабирование части изображения в CSS

Question

Я хочу показать часть изображения и масштабировать часть изображения, которое я показываю (больше или меньше) на веб-странице. Это очень легко, чтобы показать часть изображения с помощью CSS, например:

$("#myDiv").css({ 
    width: 100, 
    height: 100, 
    background: "url('myurl.jpg')", 
    backgroundPosition: "-100px -100px" 
}); 

Это тянет в изображение на URL «myurl.jpg», и отображает пикс площадь коробки 100, в позиции 100,100 этого изображения: так что все, что вы видите в myurl.jpg, это маленькая коробка. Тем не менее, я хочу сделать эту коробку больше или меньше внутри моей веб-страницы, скажем, масштабировать ее размером 50 пикселей. Я могу увидеть множество способов масштабирования фонового изображения, показывая все это. (например, очень аккуратный плагин backstretch (http://srobbin.com/jquery-plugins/backstretch/). Но я не вижу, как быстро извлекать и масштабировать одновременно.

Идеи, пожалуйста! (Я работаю в JQueryMobile, поэтому ответ должен работать там)

Answer 1

похоже, вы просто отсутствует атрибут backgroundSize.

See demo jsfiddle

$("#myDiv").css({ 
    width: 200, 
    height: 50, 
    background: "url('http://lorempixel.com/400/1000/sports/3/')", 
    backgroundPosition: "0 -365px", 
    backgroundSize: "200px 500px" 
});