100％宽度div中的响应背景图像

Question

我目前正在查询我的网站，我需要一些帮助。

当用户加载我的网站时，“餐具袋”的图像将根据用户的浏览器/显示器的大小来调整大小。然而，当发生这种情况时，一些用户看到的图像将是图像的背景，而不是主要特征，即小袋。

我想知道是否有办法解决这个问题，以便在使用100％宽度和固定高度时调整图像大小。

这是我的问题的快速链接，所以你们可以帮助我。

A link to my website

提前感谢您提供任何有用的回复。

Answer 1

而不是

background-position: 0 22%;

试

background-position: center 22%;

也许可以编辑图像以使小袋更加居中。

Answer 2

你可能只是调整你的图像，使小袋在图像本身居中，然后使用background-position：center;

编辑：我注意到你的图像是一个正方形，而你放入的容器是一个矩形。这也无助于正确定位。尝试将图像调整为容器的纵横比。