Как растянуть картинку по координатам внутри блока div?

Question

[Александр Иванов]

Имеется картинка в формате jpg. Имеются координаты квадрата, который нужно выделить в div этой картинки. Координаты обозначают диагональ, верхний левый угол картинки и правый нижний угол. Имеется div квадратный, причем произвольного размера. Каким образом впихать в этот div картинку, как на прикрепленном изображении, что бы верхний левый угол координат совпадал с левым верхним углом дива, и нижние правые соответственно. Причем при масштабирование div, картинка должна масштабироваться вместе с ним.


background-position:-154px -59px; Может указать только лишь одну координату, и если пропорции не совпадают, то этот метод не подходит

Comments

[Сергей delphinpro]

просто укажите у маленькой картинки background-size равным большой картинке, ну и смещение background-position/
В свою очередь пропорции большой картинки должны быть равными оригиналу картинки.

Answer 1

[Александр Епихин]

Так. background-position это ваша верхняя левая точка. width и height высчитывать исходя из размеров самого изображения и нижней правой точки. background-size это отношение ширины изображения к ширине блока.

Answer 2

[Дмитрий Чайников]

Чтобы вписать картинку в блок используйте background-size: cover;