html - 调整大小时保持图像对齐

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;
}

或者类似的东西？我不能确切地说如何使用您的图像设置背景位置，因为我不确定它的尺寸以及该曲线在图像中的位置。

这里有一些关于背景位置属性的好信息。