Jquery 在较小的父div中包含图像，而不调整图像大小

如何使用html和css（jquery解决方案也可以）在较小的父div（小于图像大小）中包含图像。图像不应调整大小或裁剪，并且图像的可见性应限制在父div的可见性。图像本身可能位于div2内部（不一定）

如图中所示，图像大于div1，并且图像的可见性仅限于父div（div1）。另一个div（div3）放置在div1的正下方，与图像的大小无关

图中所示的图像焦点是否存在任何问题

background-position: bottom;

---

注意：在给定的图像中，花盆的底部仅用于实际演示，该部分将隐藏在div1之外。

在图像周围创建一个div容器，将其设置为高度，并使其溢出隐藏：

.image容器{
溢出：隐藏；
高度：250px；
边框：1px纯红；
}
img{
宽度：100%；
}

---

据我所知，当背景图像超出元素边界时，它们会自动被裁剪

因此，您可以将图像设置为

div

的

背景图像。如果图像太大，超出了
div
并被裁剪，可以使用
background size
属性，它有两个非常有用的值：
contain
和
cover

div {
    background-image: url("path/to/image.jpg");
    background-size: contain; /* or cover */
}

使用
background size:contain
，将调整背景图像的大小，直到它完全包含在
div
中。另一方面，
background size:cover
将确保您的
div
被图像完全覆盖

我希望我正确理解了您的问题。
我认为在使用此代码时，图像的大小将调整为父div：我认为我们需要设置宽度：auto；而是100%。。感谢您的建议。请将宽度设置为静态数字，这样它就不会调整大小。