调整大小时保持图像对齐

Question

我有这张图片（曲线）：

它显示了下一部分的内容，因为该部分的图像形式较窄并且宽度超过1000px。

我的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 property的一些很好的信息。