Держите изображение выровненным по форме при изменении размера

Question

У меня есть это изображение (кривая):

Это показывает часть следующего раздела, потому что форма изображения является более узкой на части иширина более 1000 пикселей приблизительно.

Мой CSS для этого:

.img{
    width: 100%;
    height: auto;
}

Он должен всегда выглядеть так:

Как я могу это сделать независимо от ширины области просмотра?

Answer 1

Свойство css "background-position" может быть очень полезно для центрирования / размещения изображения в определенной позиции, чтобы оно лучше масштабировалось на адаптивных экранах.

Вы пытались отобразить изображение в качестве фонового изображенияпользовательский div, который будет иметь свойства, которые вы перечислили выше, примерно так:

.image-div {
    width: 100%;
    height: auto;
    background-image: url('my-image.jpg');
    background-position: center top;
}

или что-то подобное?Я не могу точно сказать, как установить background-position с вашим изображением, так как я не уверен в его размерах и где эта кривая лежит на изображении.

Есть некоторая хорошая информация о background-positionсвойство здесь.