調整大小時保持圖像對齊

Question

我有這張圖片（曲線）：

它顯示了下一部分的內容，因為該部分的圖像形式較窄並且寬度超過1000像素左右。

我的CSS是：

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

它應始終如下所示：

我如何獨立於視口寬度來實現這一點？

Answer 1

css屬性“背景位置”在將圖像居中/放置在特定位置時非常有用，因此在響應屏幕上尺寸更好。

您是否嘗試過以類似於以下方式將圖像顯示為自定義div的背景圖像，該圖像具有上面列出的屬性：

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

或類似的東西？ 我不確定要如何設置圖像的背景位置，因為我不確定其尺寸以及該曲線在圖像中的位置。

這里有一些有關background-position屬性的好信息。